Доброго всем времени суток.
Пишу тему, чтобы кому-то было полезно и чтобы самому не забыть. Вопрос был в следующем: в ignitegallery сделать кнопки навигации слайдшоу на большом изображении а не под ним, разнести иконку "лево"-влево, "вправо"-вправо, плэй и пауза вниз. Выглядит результат примерно так: на большом слайде справа кнопочка-стрелка направо, с левой стороны слайда такая же только влево. Если стандартно управление находится под слайдом что не удобно, то теперь кнопки навигации на самом изображении.
Нужно сделать:
1) components/com_igallery/views/gallery/default.php
блок
<div id="main_slideshow_buttons<?php echo $this->id; ?>" class="main_slideshow_buttons" ><!--main slideshow buttons bit -->
<div id="leftb"><img src="<?php echo $this->host; ?>components/com_igallery/images/rewind.png" id="slideshow_rewind<?php echo $this->id; ?>" alt="" /></div>
<div id="playb"><img src="<?php echo $this->host; ?>components/com_igallery/images/play.png" id="slideshow_play<?php echo $this->id; ?>" alt="" /></div>
<div id="rightb"><img src="<?php echo $this->host; ?>components/com_igallery/images/forward.png" id="slideshow_forward<?php echo $this->id; ?>" alt="" /></div>
</div>
поместить в div слой "main_large_image"
2) В файле components/com_igallery/css/gallery.css
у div слоя "main_slideshow_buttons" прописать position:absolution и задать z-index: 999999999;
3) далее задать этому слою нужную ширину и высоту, чтобы можно было внутри него уже задать позиционрование кнопочкам.
4) В файле components/com_igallery/views/gallery/default.php, каждую из кнопок заключаем в <div>, присваиваем класс или id и в
файле components/com_igallery/css/gallery.css прописываем позиционирование, у меня это так:
/*this holds the slideshow buttons*/
div.main_slideshow_buttons{
float: left;
top: 340px;
left: 0px;
padding: 0px;
position: absolute;
z-index: 999999999;
border: none;
width:1047px;
height: 350px;
}
/*the three slideshow images*/
div.main_slideshow_buttons img{
cursor: pointer;
}
div#rightb
{ float: right;
}
div#leftb
{ float: left;
}
div#playb
{ float: left;
padding-top: 320px;
padding-left: 500px;
}
4) Чтобы заменить кнопки на свои пропишите их в файле default.php, при этом кнопку паузы и плэй нужно прописать еще в файле gallery.js (components/com_igallery/javascript/gallery.js)
5) Если вам нужно спозиционировать стрелки влево и вправо на ленте превью под большим изображением, то просто задайте див слою main_left_right_arrows_div нужные параметы (абсолютное позиционирование) у меня это так:
/*this holds the left/right arrows */
div.main_left_right_arrows_div{
float:left;
margin: 0px 0px;
position: absolute;
bottom: 70px;
left: 0px;
}
П.С.
Галерея становится очень удобной (легко листать фотки, никуда не нужно скроллить), я доволен результатом. Надеюсь смогу кому-нибудь сэкономить
время этим постом. Всем Удачи!
П.П.С
Если кто-нибудь знает как сделать смену изображение по клику не на стрелочку а на само фото (типа как вконтакте листается) буду благодарен.
23.02.2014, 18:49:55