Jquery :first меняем на другое. Или попытка переписать плагин Simple Image Gallery Pro

[jabbaxatt]

Встала задача сделать галереи в Joomla, вставляемые в статьи. Чтобы и вплывали на весь экран при клике и справа блок прокрутки был (см. скрин)

Готового под задание не нашёл и начал уродовать плагин Simple Image Gallery Pro, а точнее его отображение вида Galleria. Внешний вид настроил, но для этого вокруг списка UL со списком миниатюр пришлось обернуть 1 DIV. И после этого галерея не работает, скорее всего из за :first в скрипте галереи.

Можно ли как-то заменить поиск элементов :first в скрипте, если они уже не first.

Фото того ради чего всё затеяно:



Код галереи с этими :first

jQuery.noConflict();
jQuery(document).ready(function($){

    $('.sigProGalleriaLink').click(function(event){

        event.preventDefault();

        // Prevent clicks upon animation
        if($(':animated').length) return false;

        // Assign element
        var el = $(this);

        // Parent container
        var outerContainer = el.parent().parent().parent().parent().parent();
        var placeholderContainer = outerContainer.find(".sigProGalleriaPlaceholderContainer div:first");
    
   // Placeholder elements
      var targetLink = placeholderContainer.find("a:first");
      var targetTitle = placeholderContainer.find("p:first");
      var targetImg = targetLink.find("img:first");

        // Source elements
      var sourceLinkHref = el.attr("href");
      var sourceLinkTitle = el.attr("title");
      var sourceImage = el.find("img:first");

      if(targetLink.attr("href")!==sourceLinkHref && targetLink.hasClass('sigProGalleriaTargetLink')){

          if(el.find("span:nth-child(2)")){
              var sourceTitle = el.find(".sigProCaption").html();
          } else {
              var sourceTitle = false;
          }

            placeholderContainer.animate({'opacity':0},300,function(){
                targetImg.attr("src",sourceLinkHref);
                var counter = 0;
                targetImg.load(function(){
                    if (counter++ == 0) {
                    targetImg.attr("title",sourceImage.attr("title"));
                    targetImg.attr("alt",sourceImage.attr("alt"));
                    targetLink.attr("href",sourceLinkHref);
                    targetLink.attr("title",sourceLinkTitle);
                    if(targetTitle.hasClass('sigProGalleriaTargetTitle') && sourceTitle) targetTitle.html(sourceTitle);
                    placeholderContainer.animate({'opacity':1},600);
                    }
                });
            }); //.delay(500).animate({'opacity':1},300);

      }

        // Set class for current thumb
        var thumbs = outerContainer.find("ul:first").find("a");
        thumbs.each(function(){
            if($(this).hasClass('sigProLinkSelected')){
                $(this).removeClass('sigProLinkSelected');
            }
        });
        el.addClass('sigProLinkSelected');

    });

});

ну и HTML

<div id="sigProGalleria<?php echo $gal_id; ?>" class="sigProContainer sigProGalleriaContainer">

    <div class="sigProGalleriaPlaceholderContainer">
        <div class="sigProGalleriaPlaceholder">
            <a href="<?php echo $gallery[0]->sourceImageFilePath; ?>" class="sigProGalleriaTargetLink<?php echo $extraClass; ?>" rel="<?php echo $relName; ?>[gallery<?php echo $gal_id; ?>]" title="<?php echo $gallery[0]->captionDescription.$gallery[0]->downloadLink.$modulePosition; ?>" target="_blank">
                <img class="sigProGalleriaTargetImg" src="<?php echo $gallery[0]->sourceImageFilePath; ?>" alt="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$gallery[0]->filename; ?>" title="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$gallery[0]->filename; ?>" />
            </a>
            <p class="sigProGalleriaTargetTitle"><?php echo $gallery[0]->captionTitle; ?></p>
        </div>
    </div>


    <div class="scrolling">  <!--  ВОТ ОН, ЭТОТ ДОБАВЛЕННЫЙ МНОЮ ДЛЯ СКРОЛЛИНГА DIV -->
    <ul id="sigProId<?php echo $gal_id; ?>" class="mycustomyava sigProGalleria<?php echo ' sigProGalleria'.$singleThumbClass; ?>">
        <?php foreach($gallery as $count=>$photo): ?>
        <li class="sigProThumb"<?php if($gal_singlethumbmode && $count>0) echo ' style="display:none !important;"'; ?>>
            <span class="sigProLinkOuterWrapper">
                <span class="sigProLinkWrapper">
                    <a href="<?php echo $photo->sourceImageFilePath; ?>" class="sigProGalleriaLink sigProLink<?php if($count==0) echo ' sigProLinkSelected'; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;" title="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" target="_blank">
                        <?php if(($gal_singlethumbmode && $count==0) || !$gal_singlethumbmode): ?>
                        <img class="sigProImg" src="<?php echo $transparent; ?>" alt="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$photo->filename; ?>" title="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$photo->filename; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;background-image:url(<?php echo $photo->thumbImageFilePath; ?>);" />
                        <?php endif; ?>
                        <?php if($gal_captions): ?>
                        <span class="sigProPseudoCaption"><b><?php echo $photo->captionTitle; ?></b></span>
                        <span class="sigProCaption" title="<?php echo $photo->captionTitle; ?>"><?php echo $photo->captionTitle; ?></span>
                        <?php endif; ?>
                    </a>
                </span>
            </span>
        </li>
        <?php endforeach; ?>
        <li class="sigProClear">&nbsp;</li>
    </ul>
    </div>
</div>

 

[jabbaxatt]

Если у кого есть галерея которая внешне будет как на скрине, и при этом при клике на большую фотографию будет разворачиваться на весь экран фото с возможностью листать\качать\читать - то тоже скиньте, может я велосипед изобретаю. Хотя искал и не нашёл.
Начальный вид галереи которую уродую:


Нужно в итоге примерно так как на фото в первом посту.

 

[SocMaster]

Возможно я не правильно вас понял, но не давно делал подобие галереи у пользователя на личной странице из его фоток. Использовал вот этот плагин Для просмотра ссылки Войди или Зарегистрируйся очень понравился. Легко подключить, настроить вид вывода фоток в обще проблем не составляет.
При клике всплывает увеличенная картинка, можно закрыть окно или же пролистать фотки.

 

[jabbaxatt]

Возможно я не правильно вас понял, но не давно делал подобие галереи у пользователя на личной странице из его фоток. Использовал вот этот плагин Для просмотра ссылки Войди или Зарегистрируйся очень понравился. Легко подключить, настроить вид вывода фоток в обще проблем не составляет.
При клике всплывает увеличенная картинка, можно закрыть окно или же пролистать фотки.

Проблема в том, что кроме всплывания картинки при клике - нужно ещё смена картинки в блоке при клике на миниатюру. При этом - миниатюры находятся справа в блоке со скроллингом.

Т.е. функционал смены и показа картинок как на Simple Image Gallery Pro пример можно глянуть Для просмотра ссылки Войди или Зарегистрируйся, а вот внешний вид - как на скрине в моём первом посту, где маленькие фото сбоку, "текущее" фото - слева большое, и по клике по нему разворачивается галерея по типу приведённого Вами плагина.

Причём в отличие от примера по ссылке - у всего блока должна быть ещё и принудительно одинаковая высота....

Собственно я нарисовал как надо, но теперь в скрипте галереи :first после того как я обернул Ul li с миниатюрами - не работает. а через это не работает вывод картинки в большой блок слева.

 

[warg]

не работает скорее всего из-за этого

var outerContainer = el.parent().parent().parent().parent().parent();

елементов в структуре стало больше, думаю добавление еще одного parent() должно решить проблему.

 

[jabbaxatt]

не работает скорее всего из-за этого

елементов в структуре стало больше, думаю добавление еще одного parent() должно решить проблему.

Ура! Заработало! Все как написано"добавление еще одного parent() - решило проблему" Спасибо тебе, добрый человек