آموزش پلاگین jquery – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Wed, 05 Nov 2014 20:00:25 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 دانلود پلاگین LightBox حرفه ای جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-lightbox-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4.html https://www.xn--mgbguh09aqiwi.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-lightbox-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4.html#comments Tue, 04 Feb 2014 11:01:33 +0000 http://xn--mgbguh09aqiwi.com/?p=1057 حتما تابحال به این مشکل برخورده اید که پس از کلیک بر روی عکس های گالری و یا مکان های دیگر , عکس در صفحه ای جدید باز شده و طبیعتا کل دیزاین شمارو در طراحی سایت بهم میزند .

این پلاگین به شما کمک میکند که از این خراب کاری جلوگیری کرده و عکس های شمارو با افکتی بسیار زیبا و در همان صفحه ( مانند سایت فیسبوک و همچنین خود سایت اسکریپت دات کام ) نمایش دهد .

ویژگیهای این پلاگین :

نمایش در تمامی مرورگرها

دارای افکت های زیبا و حرفه ای

امکان درج شرح مختصر ر زیر هر عکس

امکان گروه بندی عکس ها برای نمایش پشت سر هم ( اسلاید شو )

و اما آموزش :

ابتدا فایل های مربوط به پلاگین را از اینجا دانلود کنید و در روت سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )

نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .

حال در بالای صفحه و یا صفحات خود , کد زیر را در بین دو تگ <head> و <head/> قرار دهید .

<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
<script src="js/modernizr.custom.js"></script>

 پس از این کار , کدهای زیر را در 2 خط مانده به آخر , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

 حال کافیست که عکس های خود را به شیوه ی زیر کدنویسی کنید ( یعنی فرمت زیر را دارا باشند )

<a href="آدرس عکس بزرگ" data-lightbox="vahid-majidi" title="شرح کوتاهی در مورد عکس"><img src="آدرس عکس کوچک"/></a>

 توضیحات :

 1 – داشتن 2 اندازه بزرگ و کوچک برای یک عکس به این دلیل است که هنگام بارگذاری صفحات سایت شما , ابتدا عکس کوچک و حجم کم بارگذاری شود و پس از کلیک بر روی عکس , عکس بزرگتر که دارای حجم بیشتری هست بارگذاری شود . 

ضمنا میتوانید هر دو آدرس رو یکی قرار دهید . یعنی در هر دو صورت , یک عکس بارگذاری شود که مسلما روش بالا بهتر است .

2 – با نوشتن شرح کوتاه در اتربیوت title , میتوانید در زیر هر عکس , شرحی در مورد همان عکس را به نمایش بگذارید .

3 – گاهی میخواهید با کلیک بر روی یک عکس , عکس های دیگری که در همان گروه تصویری هستند را به صورت اسلاید شو , به کاربران نشان دهید . کافیست در اتربیوت data-lightbox , یک نام به دلخواه انتخاب نمایید و برای دیگر عکس های همان گروه تصویری هم , همان نام را تکرار کنید . به همین سادگی چند عکس را در یک گروه تصویری برای اسلاید شو قرار میدهید .

به عنوان مثال :

<a href="img/demopage/image-1.jpg" data-lightbox="vahid" title="عکس شماره یک"><img src="img/demopage/thumb-1.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-2.jpg" data-lightbox="vahid" title="عکس شماره دو"><img src="img/demopage/thumb-2.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-3.jpg" data-lightbox="majidi" title="عکس شماره سه"><img src="img/demopage/thumb-3.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-4.jpg" data-lightbox="majidi" title="عکس شماره چهار"><img src="img/demopage/thumb-4.jpg" width="150" height="150"/></a>

 همان طور که در بالا میبینید , دو عکس اول در یک گروه و دو عکس دوم در یک گروه دیگر قرار گرفتند …

آموزش : وحید مجیدی

پخش اختصاصی 

دموی پلاگین

دانلود نمونه پلاگین به صورت آماده

[sdm-download id=”1059″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-lightbox-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4.html/feed 14 دانلود پلاگین گالری عکس حرفه ای و ریسپانسیو جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%da%af%d8%a7%d9%84%d8%b1%db%8c-%d8%b9%da%a9%d8%b3-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%da%af%d8%a7%d9%84%d8%b1%db%8c-%d8%b9%da%a9%d8%b3-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html#comments Mon, 27 Jan 2014 09:12:56 +0000 http://xn--mgbguh09aqiwi.com/?p=1014 امروز با یک پلاگین فوق حرفه ای و بسیار پرکاربرد در صفحات وب در خدمت شما عزیزان هستم.

پلاگین Nivo Slider یک گالری عکس یا همان اسلاید شو عکس . همون طور که میدونید زبان Jquery یک زبان بسیار قابل انعطاف و حرفه ای میباشد که خیلی وقته جای خودشو میان طراحی های حرفهای وب سایت باز کرده و نبود پلاگین یا کدنویسی های Jquery , یک خلا در طراحی وب سایت به شمار میرود .

در همین راستا امروز میخواهم دانلود و آموزش کامل و به زبان ساده این گالری عکس حرفه ای و البته ریسپانسیو رو در اختیار شما عزیزان قرار دهم .

در بسیاری از سایت ها این پلاگین موجود میباشد اما متاسفانه نه آموزش کامل و ساده ای برای آن موجود است و نه این پلاگین به صورت بهینه شده وجود دارد. شما در این پست , پلاگین کاملا بهینه شده را دانلود خواهید کرد …

ویژگی های این پلاگین :

دارای بیش از 5 افکت مختلف 

قابلیت نمایش در تمامی مرورگرهای جدید و قدیمی

کاملا ریسپانسیو ( نمایش در تمامی دستگاه ها به صورت کامل )

کنترل کامل زمان بندی ها , افکت ها و …

دارای استایل مجزا Theme برای تغییر دیزاین به دلخواه خودتان

آموزش نصب پلاگین :

ابتدا فایل های مربوز به این پلاگین رو از اینجا دانلود کنید . پس از دانلود , پوشه ها رو در روت سایت خود قرار دهید .

نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .

حال فایل یا صفحه ای رو که میخواهید در آن از این اسلایدر استفاده کنید با استفاده از NotePad و البته ترجیحا با DreamWeaver باز کنید .

حال باید در بین دو تگ <head> و <head/> , به این پوشه ها با آدرسهای متناسب ( گفته شده در نکته بالا ) آدرس دهی نمایید .

برای حالت پیش فرض و در روت سایت به صورت زیر :

    <link rel="stylesheet" href="theme/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

 حال در دو خط مانده به انتها ( یعنی قبل از دو تگ <body/> و <html/> ) کد های زیر را کپی نمایید ( باز هم با توجه به آدرس دهی مناسب گفته شده در نکته بالا )

برای حالت پیش فرض و در روت سایت به صورت زیر :

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

 حال نوبت قطعه کدی میباشد که با کپی آن در هرجایی که از قبل در نظر گرفته اید برای نمایش اسلاید شو , میتوانید از آن استفاده کنید .

کافیست کد زیر را در محل مناسب و البته بین دو تگ <body> و <body/> کپی نمایید :

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <a href="http:/اسکریپت.com"><img src="images/VM1.jpg" title="عکس شماره یک"></a>
        <a href="http://اسکریپت.com"><img src="images/VM2.jpg" title="عکس شماره دو"></a>
        <a href="http://اسکریپت.com"><img src="images/VM3.jpg" title="عکس شماره سه"></a>
        <a href="http://اسکریپت.com"><img src="images/VM4.jpg" title="عکس شماره چهار"></a>
    </div>
</div>

  نکات و آموزش کد های بالا :

1 – به جای لینک های قرار گرفته در بالا , باید لینک های مربوط به هر عکس را جایگزین کنید که کاربر پس از کلیک بر روی عکس , وارد لینک دلخواه شود . ( در صورتی که نمیخواهید عکس شما لینک دار باشد , میتوانید کل تگ a را پاک نمایید )

2 – در تگ img و در اتربیوت src آن , لینک نمایش عکسها را وارد نماید که برای مثال , اینجا عکس ها در پوشه ای به نام images و عکس هایی با نام های VM1 , VM2 VM 3 و VM4 می باشد .

3 – در تگ img و اتربیوت title میتوانید شرحی در مورد عکس بیان کنید تا در نمایش اسلاید شو , پایین هر عکس به نمایش درآید . ( میتوانید در صورت دلخواه و عدم نمایش شرح عکس , این اتربیوت را پاک نمایید )

4 – بدیهی است که به صورت پیش فرض , این اسلایدر دارای 4 عکس میباشد که شما میتوانید به راحتی و طبق الگوی بالا , به آن عکس های بیشتری اضافه و کم کنید .

تا اینجا شما میتوانید از این پلاگین به راحتی استفاده نمایید . اما برای کسانی که میخواهند به صورت خیلی پیشرفته تر از این پلاگین استفاده نمایند و به حالت افکتها , زمان بندی ها و … دسترسی داشته باشند . باید کد زیر را به جایگزین 2 قطعه کد بالاتر کنید .

یعنی به جای این قطعه کد :

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

از این قطعه کد استفاده کنند :

    <script type="text/javascript">
        $('#slider').nivoSlider({
            effect: 'random',               // Specify sets like: 'fold,fade,sliceDown'
            slices: 15,                     // For slice animations
            boxCols: 8,                     // For box animations
            boxRows: 4,                     // For box animations
            animSpeed: 500,                 // Slide transition speed
            pauseTime: 3000,                // How long each slide will show
            startSlide: 0,                  // Set starting Slide (0 index)
            directionNav: true,             // Next & Prev navigation
            controlNav: true,               // 1,2,3... navigation
            controlNavThumbs: false,        // Use thumbnails for Control Nav
            pauseOnHover: true,             // Stop animation while hovering
            manualAdvance: false,           // Force manual transitions
            prevText: 'Prev',               // Prev directionNav text
            nextText: 'Next',               // Next directionNav text
            randomStart: false,             // Start on a random slide
            beforeChange: function(){},     // Triggers before a slide transition
            afterChange: function(){},      // Triggers after a slide transition
            slideshowEnd: function(){},     // Triggers after all slides have been shown
            lastSlide: function(){},        // Triggers when last slide is shown
            afterLoad: function(){}         // Triggers when slider has loaded
        });
    </script>

 

 با کمی تغییر در کدهای بالا , شاهد یک اسلاید شو کاملا کاستومایز و حرفه ای تر خواهید بود .

آموزش : وحید مجیدی

پخش اختصاصی

دموی اسلاید شو

دانلود اسلاید شو نمونه پلاگین به صورت آماده

[sdm-download id=”1015″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%da%af%d8%a7%d9%84%d8%b1%db%8c-%d8%b9%da%a9%d8%b3-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html/feed 3 دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html#comments Thu, 23 Jan 2014 10:48:11 +0000 http://xn--mgbguh09aqiwi.com/?p=991 حتما براتون پیش اومده که قسمتی از سایتتون دارای اسکرول باشد و میدونید که اسکرول بار های پیش فرض مرور گرها , بسیار ساده و قطعا کل دیزای سایت شمارو بهم زده و از بین میبرند .

پلاگین های زیادی در این باره در محیط وب قرار داده شده که متاسفانه خیلی از اونها خراب و تعداد کمی هم که سالم هستند اما به دلیل عدم آشنایی بعضی از وبمستران عزیز با Jquery , آموزش نصفه نیمه ای در مورد پلاگین بیان میکنند و قطعا به درد کاربر نمیخورد .

برای این ساعت از سایت اسکریپت دات کام , پلاگین بسیار حرفه ای , کامل و زیبایی رو در اختیار شما عزیزان قرار میدهم که از این پس نیازی به پلاگین های سایت های دیگر نداشته باشید .

در این پست , هم آموزش کامل نصب ابن پلاگین ها و هم نمونه باکس طراحی شده گنجانده شده است .

برای این کار ابتدا شما نیاز به 1 فایل Css و 4 فایل Jquery دارید . من برای راحتی و زیبایی کار این 5 فایل رو در پوشه های مخصوص با موضوع خودشون قرار دادم . یعنی فایل Css در پوشه Css و 4 فایل Jquery رو در پوشه ی Jquery قرار دادم.

ابتدا این دو پوشه رو از اینجا دانلود کنید و سپس در روت سایت خود قرار دهید . (طبیعتا تمامی آدرس دهی ها به نسبت Root سایت انجام شده و اگر شما بخواهید در پوشه های دیگر استفاده کنید , باید آدرس های فایل رو تغییر دهید . البته پیشنهاد میشود این کار رو انجام ندهید )

حال نوبت آموزش می باشد …

در ابتدا شما باید در صفحه ویا صفحاتی که میخواهید این اسکرول بار رو استفاده کنید , این 5 فایل رو بهش بشناسونید .

برای این کار ابتدا در بین دو تگ <head> و <head/> , باید با کد زیر, Css رو بشناسونید .

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

حال نوبت شناسایی فایل های Jquery به صفحه میباشد .

در 2 تا مانده به آخرین خط صفحه ( یعنی قبل از دو تگ <html/> و <body/> ) , کد های زیر رو کپی کنید .

	<script src="jquery/jquery-1.7.2.min.js"></script>
	<script src="jquery/jquery-ui-1.8.21.custom.min.js"></script>
	<script src="jquery/jquery.mousewheel.min.js"></script>
	<script src="jquery/jquery.mCustomScrollbar.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar({
					scrollButtons:{
						enable:false
					}
				});
			});
		})(jQuery);
	</script>

طبیعتا برای اعمال این پلاگین بر روی سایت خود , باید یک Div بسازید تا باکس ساخته شده رو با آی دی و یا کلاس , به این پلاگین متصل کنید .

برای این کار یک Div به عنوان نمونه با کلاس content بسازید . برای این کلاس حتما یک Height مشخص بدهید . این کار برای اینست که با زیاد کردن اطلاعات و نوشیته های داخل Div , از یک ارتفاعی به بعد , اسکرول  بار لحاظ و نمایش داده شود . چون اگر یک ارتفاع مشخص ندهید , به میزان اطلاعات داخل , Div هم کشیده میشود و اصلا اسکرول نمی اندازد .

نکته مهم : برای Div خود هر کلاس و یا آی دی که انتخاب میکنید , حتما باید نام آن را جایگزین نام فعلی $(“content.”) که در بالا نوشته شده است بکنید . بدیهی است اگر آی دی انتخاب کردید , باید

$("#content").mCustomScrollbar({

و اگر به مانند مثال بالا از کلاس استفاده کردید , باید

$(".content").mCustomScrollbar({

را جایگذین کنید .

آموزش های مربوط به دیزاین :

شما به راحتی میتوانید موقعیت مکانی و رنگ های مربوط به اسکرول را به دلخواه خود تغییر دهید.

برای این کار , پس از نصب پلاگین , وارد فایل Css با آدرس زیر شوید :

css/jquery.mCustomScrollbar.css

این فایل رو با NotePad و یا DreamWeaver باز کنید . حال با توجه به اطلاعات زیر , دیزاین را تغییر دهید :

1 – فاصله از سمت راست Div = خط 3

2 – پهنا و ارتفاع خط کمرنگ و زمینه اسکرول بار = خط 29 و 30

2 – پهنا و ارتفاع خط ضخیم و اصلی اسکرول بار = خط 43 و 44

4 – شفافیت حالت معمولی و حالت Hover = خط 137 و 140

5 – تغییر رنگ ها = خطهای 143 و 147 و 151 و 156

توجه : 5 نکته ی بالا فقط مهمترین خصوصیات قسمت های Css این پلاگین میباشد . طبیعتا اگر با کدهای Css آشنایی کامل دارید , میتوانید تغییرات بسیار بیشتری در دیزاین بدهید .

پخش اختصاصی

آموزش : وحید مجیدی 

دانلود نمونه آماده این پلاگین , جهت آشنایی بیشتر

[sdm-download id=”997″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html/feed 12