скрипт листающий по три картинки немного подкорректировать
Есть код который листает по три картинки. Комментарий можно написать лишь к одной (к каждой свой). Что нужно поменять чтобы был один комментарий сразу к трем картинкам.
Я хочу сделать по три картинки из каждой категории (например животные - тигры, собаки, гиены...) и чтобы категории листались вместе с картинками вот код <style type="text/css" media="screen"> <!-- body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; } input, textarea { font-family: Arial; font-size: 125%; padding: 7px; } label { display: block; } .infiniteCarousel { width: 395px; position: relative; } .infiniteCarousel .wrapper { width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: auto; min-height: 10em; margin: 0 40px; position: absolute; top: 0; } .infiniteCarousel ul a img { border: 5px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .infiniteCarousel .wrapper ul { width: 9999px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position: absolute; top: 0; } .infiniteCarousel ul li { display:block; float:left; padding: 10px; height: 85px; width: 85px; } .infiniteCarousel ul li a img { display:block; } .infiniteCarousel .arrow { display: block; height: 36px; width: 37px; background: url(images/arrow.png) no-repeat 0 0; text-indent: -999px; position: absolute; top: 37px; cursor: pointer; } .infiniteCarousel .forward { background-position: 0 0; right: 0; } .infiniteCarousel .back { background-position: 0 -72px; left: 0; } .infiniteCarousel .forward:hover { background-position: 0 -36px; } .infiniteCarousel .back:hover { background-position: 0 -108px; } --> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> (function () { $.fn.infiniteCarousel = function () { function repeat(str, n) { return new Array( n +1 ).join(str); } return this.each(function () { // magic! var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul').width(9999), $items = $slider.find('> li'), $single = $items.filter(':first') singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible); /* TASKS */ // 1. pad the pages with empty element if required if ($items.length % visible != 0) { // pad $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))) $items = $slider.find('> li'); } // 2. create the carousel padding on left and right (cloned) $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // 3. reset scroll $wrapper.scrollLeft(singleWidth * visible); // 4. pading function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth* dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 500, function () { // if page == last page - then reset position if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; } else if (page == 0) { page = pages; $wrapper.scrollLeft(singleWidth * visible * pages); } currentPage = page; }); } // 5. insert the back and forward link $wrapper.after('<a href="#" class="arrow back"><</a><a href="#" class="arrow forward">></a>'); // 6. bind the back and forward links $('a.back', this).click(function () { gotoPage(currentPage - 1); return false; }); $('a.forward', this).click(function () { gotoPage(currentPage + 1); return false; }); $(this).bind('goto', function (event, page) { gotoPage(page); }); } ); }; })(jQuery); $(document).ready(function () { $('div.infiniteCarousel').infiniteCarousel(); }); </script> </head> <body> <h1>Infinite Carousel</h1> <div class="infiniteCarousel"> <div class="wrapper"> <ul> <nobr> <li> <a href="#" title="1"><img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" /></a> <a href="#" title="2"><img src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg" height="75" width="75" alt="Wet Cab" /></a> <a href="#" title="3"><img src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg" height="75" width="75" alt="Rockefella" /></a> </li> <li> <a href="#" title="4"><img src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg" height="75" width="75" alt="Chrysler Reflect" /></a> <a href="#" title="5"><img src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg" height="75" width="75" alt="Chrysler Up" /></a> <a href="#" title="6"><img src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg" height="75" width="75" alt="Time Square Awe" /></a> </li> <li> <a href="#" title="7"><img src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg" height="75" width="75" alt="Wonky Buildings" /></a> <a href="#" title="8"><img src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg" height="75" width="75" alt="Leaves of Fall" /></a> <a href="#" title="9"><img src="http://farm4.static.flickr.com/3307/3247196560_ba2cc5300a_s.jpg" height="75" width="75" alt="Rockefella" /></a> </li> </nobr> </ul> </div> </div> </body> </html> |
ПЕРЕПУТАЛ между тегами body код другой
<h1>Infinite Carousel</h1> <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li><a href="#" title="1"><img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" /></a></li> <li><a href="#" title="2"><img src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg" height="75" width="75" alt="Wet Cab" /></a></li> <li><a href="#" title="3"><img src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg" height="75" width="75" alt="Rockefella" /></a></li> <li><a href="#" title="4"><img src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg" height="75" width="75" alt="Chrysler Reflect" /></a></li> <li><a href="#" title="5"><img src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg" height="75" width="75" alt="Chrysler Up" /></a></li> <li><a href="#" title="6"><img src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg" height="75" width="75" alt="Time Square Awe" /></a></li> <li><a href="#" title="7"><img src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg" height="75" width="75" alt="Wonky Buildings" /></a></li> <li><a href="#" title="8"><img src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg" height="75" width="75" alt="Leaves of Fall" /></a></li> <li><a href="#" title="9"><img src="http://farm4.static.flickr.com/3307/3247196560_ba2cc5300a_s.jpg" height="75" width="75" alt="Rockefella" /></a></li> </ul> </div> </div> |
вам в раздел работа
|
Часовой пояс GMT +3, время: 01:20. |