В итоге получилось то, что можно увидеть ниже в демо.
В оригинальную версию внес следущие изменения:
- Упростил все коды путем удаления лишнего
- Избавился от иконок, заменив их на символы (при желании можно будет поставить свои, например Font Awesome)
- Немного изменил стиль карусели на свой вкус
- Адаптировал модальные окна под малые экраны, но лучше использовать проф. решения, например fancybox
Демо:
+
Альбом 1
Альбом 2
Альбом 3
Установка:
Подключаем библиотеку jQuery и приведенные ниже коды.
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!-- Модальное окно --> <div id="gallery-popup"> <div id="gallery-popup-box"> <div id="gallery-popup-box-close"><span>+</span></div> <img id="gallery-popup-box-image" /> </div> </div> <div class="gallery-wrapper"> <div id="rotated-gallery"> <!-- Альбом 1 --> <div class="gallery-tab"> <div class="gallery-tab-title"> <div class="gallery-tab-title-holder"> <div class="gallery-tab-title-holder-controls"> <div class="gallery-tab-title-holder-controls-button gallery-previous"><</div> <div class="gallery-tab-title-holder-controls-button gallery-next">></div> </div> <div class="gallery-tab-title-holder-text">Альбом 1</div></div> </div> <div class="gallery-tab-images"> <div class="gallery-tab-images-slider"> <img src="/demo/rotated-gallery/1_1.jpg" /> <img src="/demo/rotated-gallery/1_2.jpg" /> <img src="/demo/rotated-gallery/1_3.jpg" /> <img src="/demo/rotated-gallery/1_4.jpg" /> <img src="/demo/rotated-gallery/1_5.jpg" /> <img src="/demo/rotated-gallery/1_6.jpg" /> <img src="/demo/rotated-gallery/1_7.jpg" /> <img src="/demo/rotated-gallery/1_8.jpg" /> <img src="/demo/rotated-gallery/1_9.jpg" /> </div> </div> </div> <!-- Альбом 2 --> <div class="gallery-tab"> <div class="gallery-tab-title"> <div class="gallery-tab-title-holder"> <div class="gallery-tab-title-holder-controls"> <div class="gallery-tab-title-holder-controls-button gallery-previous"><</div> <div class="gallery-tab-title-holder-controls-button gallery-next">></div> </div> <div class="gallery-tab-title-holder-text">Альбом 2</div></div> </div> <div class="gallery-tab-images"> <div class="gallery-tab-images-slider"> <img src="/demo/rotated-gallery/2_1.jpg" /> <img src="/demo/rotated-gallery/2_2.jpg" /> <img src="/demo/rotated-gallery/2_3.jpg" /> <img src="/demo/rotated-gallery/2_4.jpg" /> <img src="/demo/rotated-gallery/2_5.jpg" /> <img src="/demo/rotated-gallery/2_6.jpg" /> <img src="/demo/rotated-gallery/2_7.jpg" /> <img src="/demo/rotated-gallery/2_8.jpg" /> <img src="/demo/rotated-gallery/2_9.jpg" /> </div> </div> </div> <!-- Альбом 3 --> <div class="gallery-tab"> <div class="gallery-tab-title"> <div class="gallery-tab-title-holder"> <div class="gallery-tab-title-holder-controls"> <div class="gallery-tab-title-holder-controls-button gallery-previous"><</div> <div class="gallery-tab-title-holder-controls-button gallery-next">></div> </div> <div class="gallery-tab-title-holder-text">Альбом 3</div></div> </div> <div class="gallery-tab-images"> <div class="gallery-tab-images-slider"> <img src="/demo/rotated-gallery/3_1.jpg" /> <img src="/demo/rotated-gallery/3_2.jpg" /> <img src="/demo/rotated-gallery/3_3.jpg" /> <img src="/demo/rotated-gallery/3_4.jpg" /> <img src="/demo/rotated-gallery/3_5.jpg" /> <img src="/demo/rotated-gallery/3_6.jpg" /> <img src="/demo/rotated-gallery/3_7.jpg" /> <img src="/demo/rotated-gallery/3_8.jpg" /> <img src="/demo/rotated-gallery/3_9.jpg" /> </div> </div> </div> </div> </div> |
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
body { margin:0; padding:0; } .gallery-wrapper { width: 100%; overflow: hidden; } #gallery-popup { background-color: rgba(37,37,37,0.9); height: 100%; width: 100%; position: fixed; left:0; top:0; z-index: 20000; display: none; text-align:center; } #gallery-popup-box { display: inline-block; margin-top: 10%; margin-right: auto; margin-left: auto; position: relative; max-width: calc(100% - 100px); } #gallery-popup-box img{ max-width: 100%; width:auto; } #gallery-popup-box-close { background-color: rgba(53,117,159,1); height: 40px; width: 40px; font-size: 32px; line-height: 40px; color: rgba(255,255,255,1); text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; float: left; position: absolute; top: 0px; right: -40px; font-family: Courier; } #gallery-popup-box-close span { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); font-weight:bold; display:block; } #gallery-popup-box-close:hover { background-color: rgba(63,141,191,1); cursor: pointer; } #rotated-gallery { float: left; width: 110%; overflow-x: hidden; padding-bottom:40px; } .gallery-tab { float: left; width: 100%; transform: rotate(-6deg); -ms-transform: rotate(-6deg); -webkit-transform: rotate(-6deg); margin-left:-50px; } .gallery-tab-title { float: left; width: 100%; height: 50px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; margin-top: 20px; position: relative; } .gallery-tab-title-holder { float: left; height: 50px; position: absolute; left: -45px; } .gallery-tab-title-holder-controls { height: 50px; float: left; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .gallery-tab-title-holder-controls-button { float: left; height: 40px; width: 40px; text-align: center; font-size: 26px; background-color: #252525; line-height: 40px; color: rgba(243,241,233,1); margin-right: 5px; margin-top: 5px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-family: Courier; font-weight:bold; } .gallery-tab-title-holder-controls-button:hover { background-color: #337AB7; cursor: pointer; } .gallery-tab-title-holder-text { float: left; height: 50px; font-weight: bold; color: #272727; font-size: 24px; text-transform: uppercase; font-family: verdana; line-height: 45px; margin-left: 5px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .gallery-tab-title-holder-text:hover { color: #337AB7; cursor: pointer; } .gallery-tab-images { float: left; height: 220px; width: 100%; margin-top: 20px; overflow: hidden; position: relative; display: none; padding: 10px; background: #F0F0F0; } .gallery-tab-images-slider { float: left; width: 30px; overflow: hidden; height: 220px; position: absolute; } .gallery-tab-images-slider img { float: left; height: 220px; margin-right: 20px; position: relative; cursor: pointer; transition: all 0.5s; filter: grayscale(100%); } .gallery-tab-images-slider img:hover { filter: grayscale(0); } |
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$(window).on("load", function () { var animationTime = 300; $('.gallery-tab-title-holder-text').click(function() { if($(this).parent().parent().next().is(":visible")){ $(this).parent().animate({"left": -45}, animationTime); }else{ $(this).parent().animate({"left": 65}, animationTime); } $(this).parent().parent().next().slideToggle(animationTime); }); $('.gallery-tab-images-slider').each(function(slider_index, slider) { var total_width = 0; $(this).children('.gallery-tab-images-slider img').each(function(image_index, image) { $(this).attr('data-height',image.height); $(this).attr('data-width',image.width); var ratio = image.width/image.height; var actual_width = Math.round(ratio*220); total_width+= actual_width+20; }); $(this).width(total_width); }); $('.gallery-next').click(function() { if($(this).parent().parent().parent().next().is(":visible")){ var this_slider = $(this).parent().parent().parent().next().children('.gallery-tab-images-slider') if((this_slider.position().left)>(-(this_slider.width()-$('#rotated-gallery').width()))){ this_slider.animate({"left": (this_slider.position().left)-300}, 100); } } }); $('.gallery-previous').click(function() { if($(this).parent().parent().parent().next().is(":visible")){ var this_slider = $(this).parent().parent().parent().next().children('.gallery-tab-images-slider') if((this_slider.position().left)<-200){ this_slider.animate({"left": (this_slider.position().left)+300}, 100); } } }); $('#gallery-popup-box-close').click(function() { $('#gallery-popup').fadeOut(200); }); $(".gallery-tab-images-slider img").click(function() { $("#gallery-popup-box-image").attr("src", $(this).attr("src")); $('#gallery-popup').fadeIn(200); }); }); |
Почему то фото не отображаются. <img src="/resources/img/gallery/bg_1.jpeg" alt="" data-height="0" data-width="0">. Свойства data-height и data-width пересчитываются в 0. Не подскажите как это поправить?
Судя по всему нету доступа к элементам img, ошибка при загрузке ресурса(фото), Системная ошибка: net::ERR_BLOCKED_BY_CLIENT, что то блокирует доступ к элементу. Если вставляю фото на сайте этом же в других блоках, все корректно отображается
Понял в чем проблема, не понял как решить. Если фото расположено в корне проекта, то корректно отображается. У меня фотки расположены тут: src="/resources/img/gallery/bg_3.jpg" и если браузер туда доступ имеет, то jquery туда не пускает, поэтому ничего и не отображается.. Как
это решить?
Ничего не понял...
Мне нужно результат видеть, где не работает
Александр спасибо за реакцию, давненько не писал, подзабыл основы. У меня в галерее не появлялись фотографии, src неверно трактовался. Тег base href="." в head решил эту проблему