پلاگین جی کوئری ریسپانسیو – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Thu, 29 May 2014 08:34:03 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.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