به نام خدا

 

در این پست قصد داریم تا کدهای مربوط به اسلایدشو nivo و نحوه تغییرات اصلی آن را بیان کنیم.

 

در ابتدا اسلایدشو nivo را دانلود کنید.

 

 

۲

پوشه های موجود به قرار زیر می باشند:

– پوشه Image : محل قرار گیری عکس های مورد نظر برای نمایش می باشند

– پوشه scripts : محل قرارگیری فایل های jquery و پلاگین مربوط به اسلایدشو nivo می باشد.

– پوشه theme : پوشه مربوط به استایلهای بخش های مختلف اسلایدشو می باشند.

 

برای شروع کار به ترتیب زیر اقدام می کنیم:

۱- با استفاده از یکی از نرم افزارهای طراحی وب(مانندdreamweaver) یک فایل Html ایجاد می کنیم. و در قسمت body کدهای مربوط به عکسهای مورد نظر زیر را می نویسیم . بصورت زیر:

<body>

<!-- http://tarahsite.net/ -->

<div id="wrapper">
 <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
    
    <a href="images/nemo.jpg" >
    	<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="nemo"  title="nemo-www.tarahsite.net"/></a>
        
        
    <a href="images/toystory.jpg" >
    	<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="toystory" title="toystory-www.tarahsite.net" /></a>
        
    <a href="images/up.jpg" >
    	<img src="images/up.jpg"data-thumb="images/up.jpg" alt="up" title="up-www.tarahsite.net" /></a>
        
        <a href="images/walle.jpg" >
    	<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="walle" title="walle-www.tarahsite.net" /></a>
        
        
    </div>
    
    
    </div></div>

</body>

نکته: برای افزایش تعداد عکس ها، تنها کافیست کد مربوط به لینک و عکس مورد نظر را اضافه کنید:

    <a href="لینک عکس مورد نظر" >
    	<img src="آدرس عکس مورد نظر" data-thumb="images/toystory.jpg" alt="متن جایگزین عکس" title="عنوان نمایشی عکس" /></a>

 

سپس در قسمت header کدهای مربوط به فراخوانی استایل ها را وارد نمایید. بصورت زیر:

 

<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="themes/style.css" type="text/css" media="screen" />

 

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

<script type="text/javascript" src="scripts/jquery.nivo.slider.js" ></script>
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js" ></script>
    <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js" ></script>
    

در نهایت کد اصلی تابع اسلاید شو را می نویسیم:

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

نکته ۱: در کد بالا “slider”  آی دی (ID) مربوط به تگ Div در بردارنده تصاویر می باشد و می تواند تغییر کند. کافیست آی دی مورد نظر را بجای آی دی موجود بنویسید.

نکته ۲: در کد بالا nivoSlider() نام تابع موجود در فایلهای پلاگین می باشد و باید به همین شکل نوشته شود.

 

برای تغییر استایل این اسلاید شو باید به فایل های موجود در پوشه theme مراجعه کرد و کد ها را ویرایش نمود. به عنوان نمونه برای تغییر سایز به صورت زیر عمل می کنیم:

فایل style.css ، شامل تنظیمات اصلی می باشد. کافیست در این فایل به قسمت کدهای مربوط به کلاس slider-wrapper می رویم و با تغییر مقدار خصوصیت width

(بعنوان مثال width=”50%” ) مشاهده می کنید که سایز اسلایدشو در صفحه تغییر خواهد کرد.

دموی این اسلایدشو را می توانید اینجا مشاهده نمایید.

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

22 دیدگاه بر “پلاگین اسلاید شو nivo”

  1. بهنوش گفت:

    با سلام
    اسلاید شو خیلی زیبایی ساختید، دستتون درد نکنه ، زحمت کشیدید .من می خوام ازش توی پروژه پایان نامه ام استفاده کنم اما طریقه استفاده شو توی محیط ASP.NET برای وب سایتم نمی دونم . ممنون میشم اگه مراحل کار رو برام توضیح بدید .
    با تشکر

    1. با سلام
      در به کار بردن این کد ها دچار مشکل شده اید ؟
      برای استفاده از این کد ها طبق آموزش عمل کنید . فایل خود را که ایجاد کردید سپس کد های فراخوانیاستایل و تابع کتابخانه ای JQ را در تگ head وارد کنید . اگر به مشکل برخوردید و دیدید که JQ عمل نمی کنه باید ترتیب فراخوانی سه فایلش را عوض کنید.به احتمال زیاد باید jquery-1.9.0.min.js را اول زا همه فراخوانی کنید (امتحان کنید).
      div بندی های که از توی آموزش کپی کنید و یا هرنوع که دوست دارید بنویسید ولی مثل آموزش باشه و در کد جیکوری هم باید نام دایو را عوض کنید به اسمی که خودتان گذاشتید .
      باز هم سوالی بود در خدمتیم.

  2. بهنوش گفت:

    با سلام
    آقای فراست دستتون درد نکنه بابت راهنمایی خیلی خوبتون، تونستم توی یک صفحه این اسلاید شو رو پیاده سازی و اجرا بکنم، اما باز هم یه مشکل دیگه دارم و اون اینکه از کجا می تونم سایز اسلاید شو رو به ارتفاع ۲۷۰ پیکسل و عرض ۳۷۰ تغییر بدم ؟و همچنین اون نوار مشکی رنگ زیر صفحه رو بردارم ؟و همچنین نوشته های توی صفحه رو بردارم.؟و دیگه اینکه آیا من اگه از این اسلاید شو برای بیش از ۱۰ صفحه توی پروژه ام استفاده کنم (برای هر صفحه یکی جداگانه اسلاید شو بسازم) این پروژه قاطی نمی کنه؟(به هم نمی ریزه) .آخه من دارم یه چیزی شبیه سایت هتل شایگان جزیره کیش طراحی می کنم و صفحات اسلایدشو زیادی داره.

  3. بهنوش گفت:

    با سلام
    آقای فراست میشه یک کم راهنماییم کنید.من خیلی عجله دارم.
    با تشکر

    1. سلام
      ببخشید من متوجه نظر شما نشدم . شما می بایست در پاسخ به نظر من پاسخ میدادید تا برای من ایمیل می آمد.
      برای سایز مورد نظرتون شما باید در کلاس .slider-wrapper اندازه width که روی ۵۳% است کم و زیاد کنید و یا اینکه عدد ۳۷۰ را بهش بدبد.
      برای نوار سیاه رنگ در کد html کلاس nivo-caption را کلا پاک کنید (کل دایوی که این کلاس را داره) چهارتا ازاین کد هست.
      مورد سوم هم هر چند بار دوست دارید استفاده کنید فقط در کد html اسم فایل های عکسش را تغییر دهید.

  4. بهنوش گفت:

    با سلام
    ببخشید من خیلی مزاحمتون شدم ،خسته تون کردم.من قبلا اندازه with رو دست زدم اما مشکلم روی ارتفاع است و اینو نمی دونم باید از کجا تنظیمش کنم.و دیگه اینکه وقتی نوار مشکی رنگ رو برداشتم زیرش نوار سفید رنگ اومد من می خوام اصلا زیرش نوار و نوشته هم نداشته باشه.
    با تشکر

    1. با سلام
      اگه توجه کنید می بینید که در کلاس slider-wrapper کد height که مربوط به تنظیم ارتفاع است وجود ندارد و این یعنی بطور پیش فرض ارتفاع را خودکار تنظیم می کند. بهترین کار این است که اندازه ارتفاع تصاویر خود را به میزان مورد نظر تغییر دهید. البته می توانید کد height را نیز وارد کنید اما معمولا پلاگین سایز تصویر را مقدم در نظر می گیرد و ممکن است تغییر مورد نظر شما اعمال نشود.
      برای حذف نوار سیاه رنگ توضیحات عکس کافیست عبارت title را از کد عکس خود حذف کنید. و همچنین برای حذف نوار بولت های پایین اسلایدشو کافیست در فایل nivo-slider.css تنظیمات کلاسnivo-controlNav را پیدا کنید و کد visibility:hidden را در آن وارد نمایید.

  5. بهنوش گفت:

    با سلام
    آقای طالاری دستتون درد نکنه، خیلی ممنون.مشکلم حل شد.اگه میشه به یه سوال دیگه هم جواب بدید. من توی صفحه مستر پیجم یک تیبل یک در دو گذاشتم .یک منوی کشویی در خانه سمت راست کذاشتم و در خانه بعدی هم یک کانتنت پلیس هولدر گذاشتم و بعد یک صفحه ساختم که از اون مستر پیج پیروی کنه ، حالا هر وقت منوی کشویی رو باز می کنم(زیر منوها رو انتخاب میکنم) چیز هایی که توی صفحه دارم پایین میان و وقتی کشو رو می بندم بالا میرن.من یک کدی نوشتم اما نمی دونم چرا درست نمیشه لطفا راهنماییم کنید
    >div style=”clear:both;float:right <
    کانتنت پلیس هولدر

    1. با سلام.
      در طراحی های جدید کمتر از تگ table برای ساختاربندی صفحات استفاده میشه یا بهتره بگیم استفاده نمیشه، برای همین پیشنهاد می کنم از تگ div استفاده کنید. اما در هر صورت باید بدانید که تگ float باعث ایجاد شناوری در سمت راست یا چپ صفحه میشه و تگ clear باعث از بین رفتن آن میشه و اشتباه شما اینه که هر دو تگ را در استایل یک عنصر بکار بردید. مساله دیگه ای هم که باید به آن توجه کنید عمق لایه هاست. در css یا همون کدهای استایل ، تگ z-index برای تعیین عمق لایه هاست. بطوری که هرچه مقدارش بیشتر باشه عنصر مربوطه جلوتر قرار میگیره، برای همین پیشنهاد می کنم از این تگ هم استفاده کنید امیدوارم مشکلتون حل بشه. البته برای راهنمایی دقیقتر باید کل کد صفحه رو ببینم.

  6. بهنوش گفت:

    با سلام
    ببخشید دیگه من خیلی مزاحمتون شدم، شرمنده.
    دو تا کد رو هم جدا نوشتم اما بازم نشد.

    .style1
    {
    width: 100%;
    }

    مدیریت اخبار

    لیست نظرات

    لیست رزرواسیون

    مدیریت گالری تصاویر

    ویلاها
    اتاق ها
    رستوران ها
    افتخارات
    مهمانان ویژه
    کلوپ سلامتی
    نمای داخلی
    نمای خارجی
    سایر امکانات

    نرخ اتاق ها

    تماس با ما

    خروج از سایت

     

     

     

    لطفا اگه میشه راهنماییم کنید.

  7. بهنوش گفت:

    با سلام
    اه باز این اسلاید شو خوب عمل نمی کنه . برای اولین عکس نواری زیرش نشون نمی ده ولی برای بقیه عکس ها نوارسفید با نوشته رو نشون میده .در صورتی که من رفتم توی nivo-slider.css قسمت caption رو پاک کردم.البته اینو بگم که قبلا هم پاک کرده بودمش اما الان دوباره اونجا بود و قسمت title که توی تگ body که توی فرمم بود رو پاک کردم اما بازم نوشته ها و نوار رو نشون میده، چرا؟چیکارش کنم؟ کمکم کنید خواهشا.

  8. بهنوش گفت:

    ای واییییییییییییییییییی معذرت می خوام ببخشید، titleعکس اولیه رو فقط پاک کرده بودم .از خستگی و فشار زیاد درساست.
    معذرت می خوام.

  9. بهنوش گفت:

    با سلام
    کدها یی که کپی کردم نیومدند.میشه ایمیلتون رو بدید تا براتون ضمیمه کنم.

    1. سلام. ما هر کمکی از دستمان بر بیاید برایتان انجام می دهیم. می توانید فایلهای خود را به آدرس [email protected] ارسال نمایید.

  10. بهنوش گفت:

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

    1. سلام. کدهای شمارو دیدم و پیشنهاد می کنم ستون های جدول رو فلوت کنید نه div های داخل آن رو چون این دستور نسبت به عنصر والد خود عمل می کند و زمانی این کارو انجام دهید که بخواهید عناصر داخل یک ستون رو نسبت به هم قرار بدهید. همچنین مشکلی که کدهای شما دارد پراکندگی دستورات استایله یعنی برخی رو درون خطی نوشتید و بعضی رو نه این ممکنه باعث بشه کدها با هم تداخل پیدا کنند. و همینطور که قبلا هم بهتون گفتم بهتره اگه براتون مقدوره از جدول برای ساختار بندی استفاده نکنید چون تنظیمش سریعتر و راحت تره.

  11. بهنوش گفت:

    با سلام
    کد فلوت برای td نیست و این کار رو کردم وخطا گرفت.حالا یه سوال دیگه من اول یه صفحه ساختم و درش یک تیبل یک در دو انداختم .در خانه سمت چپ این اسلاید شورو گذاشتم و در خانه سمت راست می خوام مطلب تایپ کنم ، اما مطلبم از بالای صفحه ظاهر نمیشه و از زیر اسلاید شو در طرف راست ظاهر میشه با اینکه من valign=top رو تنظیم کردم.به نظرم این اسلاید شو کل صفحه رو به خودش اختصاص میده حالا میشه بهم بگید کدوم یکی از تنظیماتش رو باید دست بزنم.
    عکس و کدش رو فرستادم به ایمیلتون.
    با تشکر

  12. بهنوش گفت:

    با سلام
    آقایان طالاری و فراست میشه مشکلی که در بالا ذکر کردم را حل کنید.خواهش می کنم نصف پروژه ام به این بستگی داره .
    با تشکر

    1. سلام. بنده ی فایل برایتان میل کرده ام. مشکلتون رو حل نکرد؟؟؟

  13. بهنوش گفت:

    با سلام
    ممنون از لطفتون.اما یک خطا داره ، فرستادمش به ایمیلتون.
    با تشکر

    1. با سلام . مشکل پیش اومده از کد اول که درواقع کد معرفی صفحه است . کد درسته ولی خطا به احتمال زیاد بخاطر تفاوت در نرم افزاری است که برای کدنویسی استفاده شده . برای حل مشکل یک پروژه یا صفحه جدید با نرم افزار خود ایجاد کنید و کدهای داخل صفحه را جایگزین کنید بجز کد خط اول. فایلهای موجود هم بخاطر همون نرم افزار برنامه نویسی است که استفاده کردم . شما از چه نرم افزاری برای کدنویسی استفاده می کنید؟؟

  14. بهنوش گفت:

    با سلام
    میشه بازم کمکم کنید ، فرستادمش به ایمیلتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.