скрипт галереи только функционирует на определенных страницах

Question

Я использую скрипт галереи с эскизами на следующем посте на моем сайте

http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html

Он отлично работает, но когда вы идете на главную страницу (третий пост вниз), он перестает работать. Это потому, что у меня есть другая запись с тем же скриптом, который мешает?

Любая помощь будет очень признательна, спасибо!

Answer 1

В вашем скрипте используются идентификаторы, предназначенные для показа изображения. Идентификаторы должны быть уникальными, только один элемент может иметь любой заданный Id.

В ваших галереях img используются одни и те же идентификаторы: # pic-0, # pic-1 и т. Д. Таким образом, на клике отображается только первый найденный, img в первой галерее.

Это не должно быть слишком сложно решить, но многие из вашего кода должны быть сгенерированы CMS, поэтому я должен знать, что вы можете изменить, чтобы помочь больше.

(это часть кода обработки вашей галереи :)

function myshowImages(id) { 
/* $(".mainPic").hide(); 
$("#pic-"+id).show();*/ 
$('.mainPic').css({'display':'none'}); 
$("#pic-"+id).fadeIn('slow'); 
} 

редактировать после комментариев:

Так, honnestly ваш код немного путаницы, было бы много изменений, чтобы достичь чего-то чистый. Однако для непосредственных потребностей, вы должны использовать две ShowImage функции:

function myshowImages1(id) { 
$('.mainPic1').css({'display':'none'}); 
$("#pic-"+id).fadeIn('slow'); 
} 

function myshowImages2(id) { 
$('.mainPic2').css({'display':'none'}); 
$("#pic-"+id).fadeIn('slow'); 
} 

и редактировать свои ссылки: для первой галереи. для второго.

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

Edit2:

Таким образом, очиститель функция для использования:

1/установка: выбрал имя класса для каждой пары ссылки/IMG. Per Exemple:

<a href="" class="image_1"> 
<img alt="" height="80" src="(some long path)/lookbookcookbooksaya267b.jpg" title="" width="80"> 
</a> 

ссылка пальца и изображение, чтобы показать:

<a href="(some long path)/lookbookcookbooksaya267.jpg"> 
<img alt="" class="image_1" height="470" src="(some long path)/lookbookcookbooksaya267.jpg"></a> 

Затем я видел у вас есть JQuery, поэтому этот вид функции:

$(document).ready(function() 
{ 
    $(".gallery div div a").on("click",function() 
    { 
    var myClass = $(this).attr('class'); 
    var $parentGallery = $(this).parents('.gallery'); 
    $parentGallery.find("div > a > img").css("display","none").find("myClass").fadeIn(); 
    return false; 
    }); 
}); 

Первый , он связывает событие щелчка на всех ваших ссылках, которые являются двумя глубинами div в элементе .gallery. Это ваши большие пальцы. Нажав кнопку, он выбирает класс ссылки с щелчком большого пальца. Затем он ищет родительскую галерею этой ссылки, скрывает все изображения и показывает хороший.

Я не могу гарантировать, что это сработает, потому что ваша разметка очень сложная, но она должна.