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

Тема в разделе "JavaScript", создана пользователем jabbaxatt, 13 окт 2014.

Модераторы: ZiX
  1. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    878
    Симпатии:
    411
    Встала задача сделать галереи в Joomla, вставляемые в статьи. Чтобы и вплывали на весь экран при клике и справа блок прокрутки был (см. скрин)

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

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

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

    Безымянный.png

    Код галереи с этими :first
    HTML:
    
    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>    
     
    Последнее редактирование: 13 окт 2014
  2. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    878
    Симпатии:
    411
    Если у кого есть галерея которая внешне будет как на скрине, и при этом при клике на большую фотографию будет разворачиваться на весь экран фото с возможностью листать\качать\читать - то тоже скиньте, может я велосипед изобретаю. Хотя искал и не нашёл.
    Начальный вид галереи которую уродую:
    Безымянный.png

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

    SocMaster aka Hakerok

    Регистр.:
    26 июл 2011
    Сообщения:
    202
    Симпатии:
    47
    Возможно я не правильно вас понял, но не давно делал подобие галереи у пользователя на личной странице из его фоток. Использовал вот этот плагин http://lokeshdhakar.com/projects/lightbox2/ очень понравился. Легко подключить, настроить вид вывода фоток в обще проблем не составляет.
    При клике всплывает увеличенная картинка, можно закрыть окно или же пролистать фотки.
     
  4. jabbaxatt

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    878
    Симпатии:
    411
    Проблема в том, что кроме всплывания картинки при клике - нужно ещё смена картинки в блоке при клике на миниатюру. При этом - миниатюры находятся справа в блоке со скроллингом.

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

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

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

    warg Постоялец

    Регистр.:
    26 июн 2007
    Сообщения:
    122
    Симпатии:
    122
    не работает скорее всего из-за этого

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

    jabbaxatt Добрый модератор

    Moderator
    Регистр.:
    21 янв 2009
    Сообщения:
    878
    Симпатии:
    411
    Ура! Заработало! Все как написано"добавление еще одного parent() - решило проблему" Спасибо тебе, добрый человек :)
     
    warg нравится это.