اسلایدشویی جالب ( چرخیدن عکس ها ) برای ایجاد یک طرح خاص و متفاوت در وبسایت
آموزش استفاده
- قبل از تگ </head> کد زیر را قرار دهید :
<link rel="stylesheet" href="demo.css"> <script src="javascript/demo.js"></script> <script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block'; </script> <script>!window.jQuery && document.write(unescape('%3Cscript src="javascript/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script> - بعد از تگ <body> کد زیر را قرار بدید :
<div id="container"> <div id="portfolio"></div> <ul id="portfolio-item"> <li><img src="images/dumptruck_teaser.jpeg" alt="نمونه کار1" /></li> <li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="نمونه کار2" /></li> <li><img src="images/dozer_teaser.jpeg" alt="نمونه کار3" /></li> <li><img src="images/ltah_teaser.jpeg" alt="نمونه کار4" /></li> <li><img src="images/pirates_teaser.jpeg" alt="نمونه کار5" /></li> <li><img src="images/rustler_teaser.jpeg" alt="نمونه کار6" /></li> <li><img src="images/satellite_teaser.jpeg" alt="نمونه کار 7" /></li> <li><img src="images/werewolf_teaser.jpeg" alt="نمونه کار 8" /></li> <li><img src="images/box_socks_teaser.jpeg" alt="نمونه کار 9" /></li> <li><img src="images/capt_kidd_teaser.jpeg" alt="نمونه کار 10" /></li> <li><img src="images/bat_bedtime_teaser.jpeg" alt="نمونه کار 11" /></li> <li><img src="images/grrr_teaser.jpeg" alt="نمونه کار 12" /></li> <li><img src="images/eensy_teaser.jpeg" alt="نمونه کار 13" /></li> <li><img src="images/derby_lady_teaser.jpeg" alt="نمونه کار 14" /></li> <li><img src="images/carrot_teaser.jpeg" alt="نمونه کار 15" /></li> <li><img src="images/brush_teaser.jpeg" alt="نمونه کار 16" /></li> <li><img src="images/nunatakdribbble_teaser.jpeg" alt="نمونه کار 17" /></li> <li><img src="images/reefdribbble_teaser.jpeg" alt="نمونه کار 18" /></li> <li><img src="images/glacier_teaser.jpeg" alt="نمونه کار 19" /></li> <li><img src="images/carddribbble_teaser.jpeg" alt="نمونه کار 20" /></li> <li><img src="images/cove_teaser.jpeg" alt="نمونه کار 21" /></li> <li><img src="images/canal_teaser.jpeg" alt="نمونه کار 22" /></li> <li><img src="images/shot_1300121080_teaser.jpeg" alt="نمونه کار 23" /></li> <li><img src="images/shot_1300969987_teaser.jpeg" alt="نمونه کار 24" /></li> <li><img src="images/bestican_teaser.jpeg" alt="نمونه کار 25" /></li> <li><img src="images/bifocal_teaser.jpeg" alt="نمونه کار 26" /></li> <li><img src="images/soupsearch_teaser.jpeg" alt="نمونه کار 27" /></li> <li><img src="images/sub_teaser.jpeg" alt="نمونه کار 28" /></li> <li><img src="images/tomatosoup_teaser.jpeg" alt="نمونه کار 29" /></li> <li><img src="images/harry_teaser.jpeg" alt="نمونه کار 30" /></li> <li><img src="images/for_the_man_teaser.jpeg" alt="نمونه کار 31" /></li> <li><img src="images/extra_teaser.jpeg" alt="نمونه کار 32" /></li> </ul> <nav id="navigation"> <a href="#1" class="nav selected" data-page="1">1</a> <a href="#2" class="nav" data-page="2">2</a> <a href="#3" class="nav" data-page="3">3</a> <a href="#4" class="nav" data-page="4">4</a> </nav> </div>
سلام
چجوری میتونم به هر عکس لینک به ی صفحه خاص بدم؟
برای نمایش محصولات میخام هر عکس لینک مربوط به صفحه همون محصولو داشته باشه که با کلیک وارد صفحه محصول بشه
ممنون
سلام
این اسلایدشو درست کار میکنه؟؟ یا من درست اجراش نمیکنم؟!
ولی من فکر میکنم اشکال داره ها!
سلام
فهمیدم با اینترنت اکسپلورر مشکل داره و با کروم به خوبی کار میکنه
یعنی نمیشه کاری کرد که با اکسپلورر هم کار کنه؟
سلام
خسته نباشید به خاطر مطالب خوبتون هم ممنون
ببخشید اگر بخوایم به اون تایتل تصاویر لینک بدیم باید در جی کوئری یه سری چیزا رو فراخوانی کنیم
اگر ممکنه توضیح بدید دقیقا باید چی کار کنم
ممنون