اپل اسلایدر



این بار برای شما اسلایدری قرار دادیم که در تب های آن می توانید تصویر ، متن و… قرار دهید.
آموزش استفاده
قبل از تگ </head> کد زیر را قرار دهید :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<link rel="stylesheet" type="text/css" href="demo.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> <!--[if lte IE 7]> <style type="text/css"> ul li{ display:inline; /*float:left;*/ } </style> <![endif]--> |
بعد از تگ <body> کد زیر را قرار دهید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="main"> <h1>Apple Slider</h1> <div id="gallery"> <div id="slides"> <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div> </div> <div id="menu"> <ul> <li class="fbar"> </li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li> </ul> </div> </div> </div> |
توضیحات:
برای اینکه تب اضافه کنید لازم است شما در “id “slides :
1 2 3 4 5 6 7 8 |
<div id="slides"> <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div> <div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div> </div> |
برای مثال در داخل “div “slides کد زیر را اضافه کنید و برای لینک دادن href را مقدار دهید:
1 |
<div class="slide"><a href="#" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div> |
و نیز تصویر کوچکی از تب را در “id “menu قرار دهید :
1 |
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li> |
شرکت طراحی وب سایت پروگ پارس
دیدگاه خود را ارسال کنید :
سلام
میشه یه منوی عمودی اسکرول که در گوشه ی سایت قرار میگیره قرار بدید .
سلام
زانیار جان منظورت همچین منویی هست ؟
http://www.ijquery.ir/menu-navigation/%d9%85%d9%86%d9%88-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b4%d9%86%d8%a7%d9%88%d8%b1/
نه منوهایی که به صورت یه عکس کوچیک و یا به اندازه ی دل خواه که در بعضی از سایتها می بینیم که نصف عکس مخفی هستش و با رفتن بر روی عکس بقیه ی اون بیرون میاد و با کلیک بر روی عکس به صفحه ی مورد نظر هدایت می شه
فک میکنم از این میتونی استفاده کنی
http://www.ijquery.ir/menu-navigation/منو-جی-کوئری-باز-شو-ثابت/
خودشه فقط یه سئوال در این مدلی که شما قرا دادید می شه متن نزاشت و فقط یه عکس باشه که اینجوری کشویی بیرون بیاد ؟
بله امکانش هست که باید از img استفاده کنید با کمی ویرایش
همون ویرایشش سخته خب 😀
نمیشه یه کد مخصوص برای یه همچین منویی که در وسط صفحه قرار بگیره و به جای این مدلی از عکس استفاده شده باشه هم قرار بدید ؟
شما میتونید جای اون متن از
سلام
بابت همه چیز ممون