Использование Divs вместо ul в jquery SlideviewerPro 1.5

Я новичок в кодировании и использую Dreamweaver на основе WYSIWYG. Недавно я окунулся в JQuery и смог реализовать плагин JQuery SlideshowPro на странице. Проблема заключается в том, что эскизы пикселируются при автоматическом сокращении, и нет большого количества возможностей для перемещения отдельных эскизов, как в неупорядоченном списке.

Мне интересно, есть ли способ вручную выделять каждую отдельную миниатюру в отдельном Div (для удобства использования) и основное изображение, которое нужно прокручивать/менять в другом Div, сохраняя при этом эффект скольжения только для основного перехода изображения. Меня не интересует прокрутка эскизов, так как маловероятно, что у меня будет достаточно эскизов на каждой странице, чтобы гарантировать прокрутку. По сути, поддерживается разделенная съемка с сохранением скользящего перехода.

Исходный код можно найти на следующей странице: gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html, хотя я хочу избежать использования списков, если это возможно.

Ответы

Ответ 1

Если я правильно понял, это должно быть довольно легко сделать с простой модификацией плагина и небольшим изменением изображений li.

Сначала я добавлю атрибут данных в тег изображения в li, указав отдельный указатель большого пальца, например:

<li><img alt="Blerg." src="images/blerg.jpg" data-thumb-src="src="images/blerg_thumb.jpg" /></li>

Я добавил атрибут данных html 5, называемый data-thumb-src, чтобы содержать путь большого пальца.

Затем измените часть плагина, который создает часть слайд-шоу. Я загрузил плагин вокруг строки 99 там:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                      
});

Поменяйте это на что-то вроде этого:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("data-thumb-src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                       
});

Таким образом, большие пальцы src теперь равны значению data-thumb-src из основного изображения.

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

jQuery(this).find("li").each(function(n) { 
    if( jQuery(this).find("img").attr('data-thumb-src') ){
        var thumb_src = jQuery(this).find("img").attr('data-thumb-src');
    }else{
        var thumb_src = jQuery(this).find("img").attr("src");
    }
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + thumb_src + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                     
});

Итак, если существует большой файл src, используйте обычный палец.

Надеюсь, что это поможет.