Галерея prettyPhoto для интернет магазина

Супер решение для интернет магазина. Галерея с миниатюрами и зуммером

Изумительное и идеальное решение создания галереи изображений товара в интернет магазине. В этом плагине есть все, что нужно для функционального слайдера отображения вашего товара. Если коротко описать этот скрипт, то он представляет из себя главное изображение с миниатюрами побочных картинок товара с зуммером и дальнейшим просмотром изображений в слайдере с удобной "листовкой" слайдов.

В самом слайд-шоу также имеются миниатюры изображений, которые появляются при наведении на слайдер и исчезают, если убрать курсор мыши от изображения слайдера в сторону.

Эту галерею я собирал сам. Я давно искал такой функциональный слайдер со всеми функциями, которые есть в данном зумере. Думаю он пригодиться и для ваших проектов. Сейчас я расскажу как вставить этот прекрасный слайдер изображений в интернет магазине на сайт. Для начала нам нужно подключить скрипты и css-стили:

<link href="./css/prettyPhoto.css" imghref="css/prettyPhoto.css" media="screen" rel="stylesheet" type="text/css"> <mce:script type="text/javascript" imgsrc="js/scripts.js"></mce:script> <mce:script type="text/javascript" imgsrc="js/jquery.prettyPhoto.js"></mce:script>

Вставляем этот код <head>

Далее в html файл вставляем данный код, там где нужно отобразить слайдер:

 

<div class="img_middle_big" id="product_image_big_photos"><div><div> <a rel="prettyPhoto[pp_gal]" href="img/111.jpg" imghref="img/111.jpg" target="_blank" style="" imgstyle=""> <img src="img/1.jpg" imgsrc="img/1.jpg" alt=""> <b class="zoom"></b> </a> <a rel="prettyPhoto[pp_gal]" href="img/222.jpg" imghref="img/222.jpg" target="_blank" style="display: none" imgstyle="display: none;"> <img src="img/2.jpg" imgsrc="img/2.jpg" alt=""> <b class="zoom"></b> </a> <a rel="prettyPhoto[pp_gal]" href="img/333.jpg" imghref="img/333.jpg" target="_blank" style="display: none" imgstyle="display: none;"> <img src="img/3.jpg" imgsrc="img/3.jpg" alt=""> <b class="zoom"></b> </a> <a rel="prettyPhoto[pp_gal]" href="img/444.jpg" imghref="img/444.jpg" target="_blank" style="display: none" imgstyle="display: none;"> <img src="img/4.jpg" imgsrc="img/4.jpg" alt=""> <b class="zoom"></b> </a> </div></div></div> <div class="photos" id="product_images_small_photos"> <div class="img_middle_small"><div> <a href="./img/1.jpg" imghref="img/1.jpg" target="_blank"><img class="game_img_selected" src="./img/11.jpg" imgsrc="img/11.jpg" alt=""></a> </div></div> <div class="img_middle_small"><div> <a href="./img/2.jpg" imghref="img/2.jpg" target="_blank"><img class="" src="./img/22.jpg" imgsrc="img/22.jpg" alt=""></a> </div></div> <div class="img_middle_small"><div> <a href="./img/3.jpg" imghref="img/3.jpg" target="_blank"><img class="" src="./img/33.jpg" imgsrc="img/33.jpg" alt=""></a> </div></div> <div class="img_middle_small"><div> <a href="./img/4.jpg" imghref="img/4.jpg" target="_blank"><img class="" src="./img/44.jpg" imgsrc="img/44.jpg" alt=""></a> </div></div> <div class="cl"></div> </div>

 

В самом низу сайта до </body>  вставляем js код:

 

<script type="text/javascript"><!-- $(function(){ $('#product_images_small_photos a').click(function(){ var $a = $(this); var $sImg = $a.find('img'); $('#product_images_small_photos img.game_img_selected').removeClass('game_img_selected'); $sImg.addClass('game_img_selected'); var index = $(this).index('#product_images_small_photos a') $('#product_image_big_photos a').hide(); $('#product_image_big_photos a').eq(index).show(); return false; }); $('#product_image_big_photos a').hover( function(){$(this).children('b').addClass('hover');}, function(){$(this).children('b').removeClass('hover');} ); }); // --></script> <script type="text/javascript"><!-- $(function() { $("#product_image_big_photos a[rel^='prettyPhoto']").prettyPhoto({ animation_speed: 0, slideshow: false, social_tools: '', deeplinking: false, default_width: 1500, default_height: 938, allow_imgize: true }); }); // --></script>

 

Поключаем css стили:

 

.photos {padding:5px 0 20px; margin:0 -25px 0 0;} .photos .img_middle_small {margin: 0 24px 9px 0;} .game_img_selected {border:1px solid #fff;} .img_middle {display:table; width:110px; height:110px; margin:0 0 0px;} .img_middle div {display:table-cell; width:110px; height:110px; text-align:center; vertical-align:middle;} .img_middle_big { width:400px; height:251px; position:relative; margin:0 0 5px; } .img_middle_big b.zoom{ display:block; position:absolute; width:30px; height:30px; bottom:5px; right:5px; background: url(../img/icon.png) 0 -691px no-repeat;} .img_middle_big b.zoom.hover, .img_middle_big b.zoom:hover{background: url(../img/icon.png) 0 -737px no-repeat;} .img_middle_big div {display:table; width:400px; height:251px; border: 1px solid #bcbec0; background: #fff;} .img_middle_big div div {display:table-cell; width:398px; height:248px; text-align:center; vertical-align:middle; border:0;} .img_middle_small {display:table; width:80px; height:80px; margin:0; float:left; border: 1px solid #bcbec0; margin: 0 8px 9px 0; background: #fff;} .img_middle_small div {display:table-cell; width:80px; height:80px; text-align:center; vertical-align:middle;} .img_middle img, .img_middle_big img, .img_middle_small img {vertical-align:middle;} div.pp_default .pp_top,div.pp_default .pp_top .pp_middle,div.pp_default .pp_top .pp_left,div.pp_default .pp_top .pp_right,div.pp_default .pp_bottom,div.pp_default .pp_bottom .pp_left,div.pp_default .pp_bottom .pp_middle,div.pp_default .pp_bottom .pp_right{height:13px} div.pp_default .pp_top .pp_left{background:url(../img/sprite.png) -78px -93px no-repeat} div.pp_default .pp_top .pp_middle{background:url(../img/sprite_x.png) top left repeat-x} div.pp_default .pp_top .pp_right{background:url(../img/sprite.png) -112px -93px no-repeat} div.pp_default .pp_content .ppt{color:#f8f8f8} div.pp_default .pp_content_container .pp_left{background:url(../img/sprite_y.png) -7px 0 repeat-y;padding-left:13px} div.pp_default .pp_content_container .pp_right{background:url(../img/sprite_y.png) top right repeat-y;padding-right:13px} div.pp_default .pp_next:hover{background:url(../img/sprite_next.png) center right no-repeat;cursor:pointer} div.pp_default .pp_previous:hover{background:url(../img/sprite_prev.png) center left no-repeat;cursor:pointer} div.pp_default .pp_expand{background:url(../img/sprite.png) 0 -29px no-repeat;cursor:pointer;height:28px;width:28px} div.pp_default .pp_expand:hover{background:url(../img/sprite.png) 0 -56px no-repeat;cursor:pointer} div.pp_default .pp_contract{background:url(../img/sprite.png) 0 -84px no-repeat;cursor:pointer;height:28px;width:28px} div.pp_default .pp_contract:hover{background:url(../img/sprite.png) 0 -113px no-repeat;cursor:pointer} div.pp_default .pp_close{background:url(../img/sprite.png) 2px 1px no-repeat;cursor:pointer;height:30px;width:30px} div.pp_default .pp_gallery ul li a{background:url(../img/default_thumb.png) center center #f8f8f8;border:1px solid #aaa} div.pp_default .pp_social{margin-top:7px} div.pp_default .pp_gallery a.pp_arrow_previous,div.pp_default .pp_gallery a.pp_arrow_next{left:auto;position:static} div.pp_default .pp_nav .pp_play,div.pp_default .pp_nav .pp_pause{background:url(../img/sprite.png) -51px 1px no-repeat;height:30px;width:30px} div.pp_default .pp_nav .pp_pause{background-position:-51px -29px} div.pp_default a.pp_arrow_previous,div.pp_default a.pp_arrow_next{background:url(../img/sprite.png) -31px -3px no-repeat;height:20px;margin:4px 0 0;width:20px} div.pp_default a.pp_arrow_next{background-position:-82px -3px;left:52px} div.pp_default .pp_content_container .pp_details{margin-top:5px} div.pp_default .pp_nav{clear:none;height:30px;position:relative;width:110px} div.pp_default .pp_nav .currentTextHolder{color:#999;font-family:Georgia;font-size:11px;font-style:italic;left:75px;line-height:25px;margin:0;padding:0 0 0 10px;position:absolute;top:2px} div.pp_default .pp_close:hover,div.pp_default .pp_nav .pp_play:hover,div.pp_default .pp_nav .pp_pause:hover,div.pp_default .pp_arrow_next:hover,div.pp_default .pp_arrow_previous:hover{opacity:0.7} div.pp_default .pp_description{font-size:11px;font-weight:700;line-height:14px;margin:5px 50px 5px 0} div.pp_default .pp_bottom .pp_left{background:url(../img/sprite.png) -78px -127px no-repeat} div.pp_default .pp_bottom .pp_middle{background:url(../img/sprite_x.png) bottom left repeat-x} div.pp_default .pp_bottom .pp_right{background:url(../img/sprite.png) -112px -127px no-repeat} div.pp_default .pp_loaderIcon{background:url(../img/loader.gif) center center no-repeat} div.light_rounded .pp_top .pp_left{background:url(../img/sprite.png) -88px -53px no-repeat} div.light_rounded .pp_top .pp_right{background:url(../img/sprite.png) -110px -53px no-repeat} div.light_rounded .pp_next:hover{background:url(../img/btnNext.png) center right no-repeat;cursor:pointer} div.light_rounded .pp_previous:hover{background:url(../img/btnPrevious.png) center left no-repeat;cursor:pointer} div.light_rounded .pp_expand{background:url(../img/sprite.png) -31px -26px no-repeat;cursor:pointer} div.light_rounded .pp_expand:hover{background:url(../img/sprite.png) -31px -47px no-repeat;cursor:pointer} div.light_rounded .pp_contract{background:url(../img/sprite.png) 0 -26px no-repeat;cursor:pointer} div.light_rounded .pp_contract:hover{background:url(../img/sprite.png) 0 -47px no-repeat;cursor:pointer} div.light_rounded .pp_close{background:url(../img/sprite.png) -1px -1px no-repeat;cursor:pointer;height:22px;width:75px} div.light_rounded .pp_nav .pp_play{background:url(../img/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.light_rounded .pp_nav .pp_pause{background:url(../img/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.light_rounded .pp_arrow_previous{background:url(../img/sprite.png) 0 -71px no-repeat} div.light_rounded .pp_arrow_next{background:url(../img/sprite.png) -22px -71px no-repeat} div.light_rounded .pp_bottom .pp_left{background:url(../img/sprite.png) -88px -80px no-repeat} div.light_rounded .pp_bottom .pp_right{background:url(../img/sprite.png) -110px -80px no-repeat} div.dark_rounded .pp_top .pp_left{background:url(../img/sprite.png) -88px -53px no-repeat} div.dark_rounded .pp_top .pp_right{background:url(../img/sprite.png) -110px -53px no-repeat} div.dark_rounded .pp_content_container .pp_left{background:url(../img/contentPattern.png) top left repeat-y} div.dark_rounded .pp_content_container .pp_right{background:url(../img/contentPattern.png) top right repeat-y} div.dark_rounded .pp_next:hover{background:url(../img/btnNext.png) center right no-repeat;cursor:pointer} div.dark_rounded .pp_previous:hover{background:url(../img/btnPrevious.png) center left no-repeat;cursor:pointer} div.dark_rounded .pp_expand{background:url(../img/sprite.png) -31px -26px no-repeat;cursor:pointer} div.dark_rounded .pp_expand:hover{background:url(../img/sprite.png) -31px -47px no-repeat;cursor:pointer} div.dark_rounded .pp_contract{background:url(../img/sprite.png) 0 -26px no-repeat;cursor:pointer} div.dark_rounded .pp_contract:hover{background:url(../img/sprite.png) 0 -47px no-repeat;cursor:pointer} div.dark_rounded .pp_close{background:url(../img/sprite.png) -1px -1px no-repeat;cursor:pointer;height:22px;width:75px} div.dark_rounded .pp_description{color:#fff;margin-right:85px} div.dark_rounded .pp_nav .pp_play{background:url(../img/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.dark_rounded .pp_nav .pp_pause{background:url(../img/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.dark_rounded .pp_arrow_previous{background:url(../img/sprite.png) 0 -71px no-repeat} div.dark_rounded .pp_arrow_next{background:url(../img/sprite.png) -22px -71px no-repeat} div.dark_rounded .pp_bottom .pp_left{background:url(../img/sprite.png) -88px -80px no-repeat} div.dark_rounded .pp_bottom .pp_right{background:url(../img/sprite.png) -110px -80px no-repeat} div.dark_rounded .pp_loaderIcon{background:url(../img/loader.gif) center center no-repeat} div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:#000} div.dark_square .pp_description{color:#fff;margin:0 85px 0 0} div.dark_square .pp_loaderIcon{background:url(../img/loader.gif) center center no-repeat} div.dark_square .pp_expand{background:url(../img/sprite.png) -31px -26px no-repeat;cursor:pointer} div.dark_square .pp_expand:hover{background:url(../img/sprite.png) -31px -47px no-repeat;cursor:pointer} div.dark_square .pp_contract{background:url(../img/sprite.png) 0 -26px no-repeat;cursor:pointer} div.dark_square .pp_contract:hover{background:url(../img/sprite.png) 0 -47px no-repeat;cursor:pointer} div.dark_square .pp_close{background:url(../img/sprite.png) -1px -1px no-repeat;cursor:pointer;height:22px;width:75px} div.dark_square .pp_nav{clear:none} div.dark_square .pp_nav .pp_play{background:url(../img/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.dark_square .pp_nav .pp_pause{background:url(../img/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.dark_square .pp_arrow_previous{background:url(../img/sprite.png) 0 -71px no-repeat} div.dark_square .pp_arrow_next{background:url(../img/sprite.png) -22px -71px no-repeat} div.dark_square .pp_next:hover{background:url(../img/btnNext.png) center right no-repeat;cursor:pointer} div.dark_square .pp_previous:hover{background:url(../img/btnPrevious.png) center left no-repeat;cursor:pointer} div.light_square .pp_expand{background:url(../img/sprite.png) -31px -26px no-repeat;cursor:pointer} div.light_square .pp_expand:hover{background:url(../img/sprite.png) -31px -47px no-repeat;cursor:pointer} div.light_square .pp_contract{background:url(../img/sprite.png) 0 -26px no-repeat;cursor:pointer} div.light_square .pp_contract:hover{background:url(../img/sprite.png) 0 -47px no-repeat;cursor:pointer} div.light_square .pp_close{background:url(../img/sprite.png) -1px -1px no-repeat;cursor:pointer;height:22px;width:75px} div.light_square .pp_nav .pp_play{background:url(../img/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.light_square .pp_nav .pp_pause{background:url(../img/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.light_square .pp_arrow_previous{background:url(../img/sprite.png) 0 -71px no-repeat} div.light_square .pp_arrow_next{background:url(../img/sprite.png) -22px -71px no-repeat} div.light_square .pp_next:hover{background:url(../img/btnNext.png) center right no-repeat;cursor:pointer} div.light_square .pp_previous:hover{background:url(../img/btnPrevious.png) center left no-repeat;cursor:pointer} div.facebook .pp_top .pp_left{background:url(../img/sprite.png) -88px -53px no-repeat} div.facebook .pp_top .pp_middle{background:url(../img/contentPatternTop.png) top left repeat-x} div.facebook .pp_top .pp_right{background:url(../img/sprite.png) -110px -53px no-repeat} div.facebook .pp_content_container .pp_left{background:url(../img/contentPatternLeft.png) top left repeat-y} div.facebook .pp_content_container .pp_right{background:url(../img/contentPatternRight.png) top right repeat-y} div.facebook .pp_expand{background:url(../img/sprite.png) -31px -26px no-repeat;cursor:pointer} div.facebook .pp_expand:hover{background:url(../img/sprite.png) -31px -47px no-repeat;cursor:pointer} div.facebook .pp_contract{background:url(../img/sprite.png) 0 -26px no-repeat;cursor:pointer} div.facebook .pp_contract:hover{background:url(../img/sprite.png) 0 -47px no-repeat;cursor:pointer} div.facebook .pp_close{background:url(../img/sprite.png) -1px -1px no-repeat;cursor:pointer;height:22px;width:22px} div.facebook .pp_description{margin:0 37px 0 0} div.facebook .pp_loaderIcon{background:url(../img/loader.gif) center center no-repeat} div.facebook .pp_arrow_previous{background:url(../img/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px} div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default} div.facebook .pp_arrow_next{background:url(../img/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px} div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default} div.facebook .pp_nav{margin-top:0} div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px} div.facebook .pp_nav .pp_play{background:url(../img/sprite.png) -1px -123px no-repeat;height:22px;width:22px} div.facebook .pp_nav .pp_pause{background:url(../img/sprite.png) -32px -123px no-repeat;height:22px;width:22px} div.facebook .pp_next:hover{background:url(../img/btnNext.png) center right no-repeat;cursor:pointer} div.facebook .pp_previous:hover{background:url(../img/btnPrevious.png) center left no-repeat;cursor:pointer} div.facebook .pp_bottom .pp_left{background:url(../img/sprite.png) -88px -80px no-repeat} div.facebook .pp_bottom .pp_middle{background:url(../img/contentPatternBottom.png) top left repeat-x} div.facebook .pp_bottom .pp_right{background:url(../img/sprite.png) -110px -80px no-repeat} div.pp_pic_holder a:focus{outline:none} div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500} div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000} .pp_content{height:40px;min-width:40px} * html .pp_content{width:40px} .pp_content_container{position:relative;text-align:left;width:100%} .pp_content_container .pp_left{padding-left:20px} .pp_content_container .pp_right{padding-right:20px} .pp_content_container .pp_details{float:left;margin:10px 0 2px} .pp_description{display:none;margin:0} .pp_social{float:left;margin:0} .pp_social .facebook{float:left;margin-left:5px;overflow:hidden;width:55px} .pp_social .twitter{float:left} .pp_nav{clear:right;float:left;margin:3px 10px 0 0} .pp_nav p{float:left;margin:2px 4px;white-space:nowrap} .pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px} a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px} .pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000} .pp_gallery{display:none;left:50%;margin-top:-50px;position:absolute;z-index:10000} .pp_gallery div{float:left;overflow:hidden;position:relative} .pp_gallery ul{float:left;height:35px;margin:0 0 0 5px;padding:0;position:relative;white-space:nowrap} .pp_gallery ul a{border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden} .pp_gallery ul a img{border:0} .pp_gallery li{display:block;float:left;margin:0 5px 0 0;padding:0} .pp_gallery li.default a{background:url(../img/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px} .pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px!important} a.pp_next{background:url(../img/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%} a.pp_previous{background:url(../img/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%} a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000} a.pp_close{display:block;line-height:22px;position:absolute;right:0;text-indent:-10000px;top:0} .pp_loaderIcon{display:block;height:24px;left:50%;margin:-12px 0 0 -12px;position:absolute;top:50%;width:24px} #pp_full_img{line-height:1!important} #pp_full_img .pp_inline{text-align:left} #pp_full_img .pp_inline p{margin:0 0 15px} div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999} div.pp_default .pp_content,div.light_rounded .pp_content{background-color:#fff} div.pp_default #pp_full_img .pp_inline,div.light_rounded .pp_content .ppt,div.light_rounded #pp_full_img .pp_inline,div.light_square .pp_content .ppt,div.light_square #pp_full_img .pp_inline,div.facebook .pp_content .ppt,div.facebook #pp_full_img .pp_inline{color:#000} div.pp_default .pp_gallery ul li a:hover,div.pp_default .pp_gallery ul li.selected a,.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff} div.pp_default .pp_details,div.light_rounded .pp_details,div.dark_rounded .pp_details,div.dark_square .pp_details,div.light_square .pp_details,div.facebook .pp_details{position:relative} div.light_rounded .pp_top .pp_middle,div.light_rounded .pp_content_container .pp_left,div.light_rounded .pp_content_container .pp_right,div.light_rounded .pp_bottom .pp_middle,div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content,div.facebook .pp_content{background:#fff} div.light_rounded .pp_description,div.light_square .pp_description{margin-right:85px} div.light_rounded .pp_gallery a.pp_arrow_previous,div.light_rounded .pp_gallery a.pp_arrow_next,div.dark_rounded .pp_gallery a.pp_arrow_previous,div.dark_rounded .pp_gallery a.pp_arrow_next,div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next,div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px!important} div.light_rounded .pp_arrow_previous.disabled,div.dark_rounded .pp_arrow_previous.disabled,div.dark_square .pp_arrow_previous.disabled,div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default} div.light_rounded .pp_arrow_next.disabled,div.dark_rounded .pp_arrow_next.disabled,div.dark_square .pp_arrow_next.disabled,div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default} div.light_rounded .pp_loaderIcon,div.light_square .pp_loaderIcon{background:url(../img/loader.gif) center center no-repeat} div.dark_rounded .pp_top .pp_middle,div.dark_rounded .pp_content,div.dark_rounded .pp_bottom .pp_middle{background:url(../img/contentPattern.png) top left repeat} div.dark_rounded .currentTextHolder,div.dark_square .currentTextHolder{color:#c4c4c4} div.dark_rounded #pp_full_img .pp_inline,div.dark_square #pp_full_img .pp_inline{color:#fff} .pp_top,.pp_bottom{height:20px;position:relative} * html .pp_top,* html .pp_bottom{padding:0 20px} .pp_top .pp_left,.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px} .pp_top .pp_middle,.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px} * html .pp_top .pp_middle,* html .pp_bottom .pp_middle{left:0;position:static} .pp_top .pp_right,.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px} .pp_fade,.pp_gallery li.default a img{display:none}

Закачиваем скрипт prettyPhoto.js, scripts.js и изображения из архива в директории, которые указаны у нас теге <head> и ВУА-ЛЯ - галерея для интернет магазина готова. Естественно этот слайдер можно использовать и не для интернет магазина, а совершенно в любых проектах. Но идеально он подходит именно для отображения товаров на сайте. Приятной работы, надеюсь галерея вам пригодится.

Если вы не видите кнопку "Скачать"
отключите блокировщик рекламы

Комментарии ()

    Не то, что искали? Воспользуйтесь поиском