Galerie Skript funktioniert nur auf bestimmten Seiten

Question

ich eine Galerie Skript mit Thumbnails auf dem folgenden Beitrag auf meiner Website mit

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

Es funktioniert gut, aber wenn Sie gehen auf die Hauptseite (dritten Beitrag nach unten), hört es auf zu arbeiten. Liegt es daran, dass ich einen anderen Beitrag mit demselben Skript habe, der sich störend auswirkt?

Jede Hilfe wäre sehr geschätzt, danke!

Answer 1

Ihr Skript verwendet ids das Bild zu zeigen, zielen. Ids sollten einmalig sein, nur ein Element darf eine beliebige Id haben.

Ihre beiden Galerien img haben die gleichen IDs: # pic-0, # pic-1, usw. Also beim Klick wird nur der erste gefunden, der img in der ersten Galerie angezeigt wird.

Es sollte nicht allzu schwer zu lösen, aber eine Menge Code muss CMS-generierte, also muss ich wissen, was Sie können mehr helfen ändern.

(das ist das Stück Code Ihrer Galerie Umgang :)

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

bearbeiten nach Kommentare:

Also, Glück unwichtig Code ein bisschen Chaos ist, wäre es viel Veränderung sein, etwas zu erreichen, reinigen. jedoch für Ihre unmittelbaren Bedürfnisse, sollten Sie zwei showimage Funktionen nutzen:

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

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

Und Ihre Links bearbeiten: für die erste Galerie. für die zweite.

Beachten Sie, dass es ist hässlich und nicht skalierbar: Wenn Sie drei Galerie haben, wird es brechen. Ich werde auf dem Code, um zu sehen, wie Sie eine einzigartige Funktion haben könnten zu tun.

Edit2:

Also, eine sauberere Funktion für Sie zu nutzen:

1/Setup: wählte einen Klassennamen für jeden Link/img Paar. Per exemple:

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

der Daumen Link und das Bild zu zeigen:

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

Dann habe ich Sie haben JQuery gesehen, so dass diese Art der Funktion:

$(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; 
    }); 
}); 

Erste es bindet ein Click-Ereignis auf allen Links, die zwei div Tiefe im .gallery Elemente sind. Das sind deine Daumen. Bei einem Klick holt es die Klasse des klickten Daumen Link. Dann sucht es nach der Mutter .gallery dieser Verbindung, all Bilder verstecken und die guten zeigen.

ich nicht wirklich garantieren kann es die Box funktionieren werden, weil Ihr Markup sehr komplex, aber es sollte.