Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 2 Ответов
  • 6206 Просмотров
*

_Lucky_

  • Осваиваюсь на форуме
  • 14
  • 1 / 0
  • Приношу счастье! :)
Кастомизация Ignite gallery
« : 06.09.2012, 03:59:19 »
Доброго всем времени суток.

Пишу тему, чтобы кому-то было полезно и чтобы самому не забыть.  Вопрос был в следующем: в 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;
}

П.С.
Галерея становится очень удобной (легко листать фотки, никуда не нужно скроллить), я доволен результатом. Надеюсь смогу кому-нибудь сэкономить
время этим постом. Всем Удачи!

П.П.С
Если кто-нибудь знает как сделать смену изображение по клику не на стрелочку а на само фото (типа как вконтакте листается) буду благодарен.



*

mitayka

  • Осваиваюсь на форуме
  • 12
  • 0 / 0
Re: Кастомизация Ignite gallery
« Ответ #1 : 15.09.2012, 23:56:19 »
Привет! Вроде 06.09.2012, а не 2009 к примеру. Какая версия Игните у тебя стоит ? В версии 2.7 для Д1.5 нет папки gallery (components/com_igallery/views/gallery/default.php), нет файла gallery.css  (components/com_igallery/css/gallery.css )

Если возможно напиши что у куда прописать в актуальной версии 2.7. Спасибо !
*

nadaff

  • Осваиваюсь на форуме
  • 13
  • 1 / 0
Re: Кастомизация Ignite gallery
« Ответ #2 : 28.10.2012, 19:59:51 »
Для версии 2.7 искал решение проблемы, но тщетно...Пришлось самому копать, правда я стрелки хотел поднять только для Thumbnail(превьюшек), т.к. я вообще убрал основное изображение.

Мой путь был таков:

в блок добавляем  + 50; ?>px; position:absolute; left:-25px; ">[/font][/font][/font][/font]:
получается так:
Код
 <?php
    if($this->thumbsVars->arrows_left_right == 1)
    {
        ?>
        <div class="igallery_clear"></div>
<div id="<?php echo $this->thumbsVars->prefix; ?>_left_right_arrows_div<?php echo $this->uniqueid; ?>" class="<?php echo $this->thumbsVars->prefix; ?>_left_right_arrows_div" style="width: <?php echo $this->thumbsVars->thumb_container_width + 50; ?>px; position:absolute; left:-25px; ">

<img src="<?php echo IG_IMAGE_ASSET_PATH; ?>left_arrow.png" id="<?php echo $this->thumbsVars->prefix; ?>_left_arrow<?php echo $this->uniqueid; ?>" class="<?php echo $this->thumbsVars->prefix; ?>_left_arrow_img" alt="" />
<img src="<?php echo IG_IMAGE_ASSET_PATH; ?>right_arrow.png" id="<?php echo $this->thumbsVars->prefix; ?>_right_arrow<?php echo $this->uniqueid; ?>" class="<?php echo $this->thumbsVars->prefix; ?>_right_arrow_img" alt="" />

</div>

Вырезаем и вставляем после:
Код
<?php
}
        
$overflow = $this->thumbsVars->thumb_scrollbar == 1 ? ' overflow: auto;' : ' overflow: hidden;';
$height = $this->thumbsVars->thumb_container_height != 0 ? ' height: '.$this->thumbsVars->thumb_container_height.'px;' : '';
?>

Потом в стилях добавляем позиционируем по вертикали этот див div[class$="left_right_arrows_div"]

 *DRINK* и должно заработать=)
« Последнее редактирование: 28.10.2012, 20:06:39 от nadaff »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Галерея картинок ignite gallery дрожит

Автор nov2nik

Ответов: 4
Просмотров: 5067
Последний ответ 23.02.2014, 18:49:55
от Aurika
Ignite Gallery 2.1 Можно ли обновить? Или...?

Автор afina2009

Ответов: 2
Просмотров: 4878
Последний ответ 24.06.2013, 22:19:18
от gekagal
Отображение комментариев в двух разных местах на одной странице (Ignite Gallery v3.4.7)

Автор Arcus

Ответов: 5
Просмотров: 5109
Последний ответ 13.06.2013, 20:45:53
от AlexSmirnov
Проблема при згрузке изображений в Ignite Gallery

Автор Ksen-nn

Ответов: 17
Просмотров: 16195
Последний ответ 05.02.2013, 10:18:12
от NikollO
Ignite Gallery 2.6 голосование

Автор fil

Ответов: 1
Просмотров: 4558
Последний ответ 10.05.2012, 21:52:22
от fil