Ich versuche, fancybox so anpassen, dass, wenn eines der 4 Bilder auf der Seite angezeigt wird, dies ist derjenige, der im Fancybox-Fenster geladen wird.Aufruf fancybox mit jquery. Klick-Funktion
Um dies zu tun möchte ich die jquery .attr Funktion verwenden, um das Bild src (als Variable) an den Hauptbildhalter übergeben.
Mein aktueller Jquery-Code ist:
jQuery(document).ready(function($) {
$("a.group").click(function() {
var image = $(this).attr("name");
$("#largeId").attr({ src: image});
$("a.group").fancybox({
'frameWidth':966,
'frameHeight': 547,
'hideOnContentClick': false,
'overlayOpacity': 0.85,
'callbackOnShow': function() {
$("#container ul#thumbnails li a").click(function(){
var largePath = $(this).attr("title");
$("#largeId").fadeOut("fast").hide();
$("#largeId").attr({ src: largePath });
$("#largeId").fadeIn("slow");return false;
});
$("#container ul#thumbnails li a").click(function(){
$('.active').removeClass('active');
$(this).addClass("active");
});
}
});
});
});
Der HTML-Code für die Haupt-Seite: Bild
<ul id="images">
<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li>
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li>
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li>
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li>
</ul>
Für das Fancybox Fenster:
<div id="main_image">
<img id="largeId" src="" alt="" title="" />
</div>
----- --EDIT ----------
nur damit du weißt, das funktioniert meistens, wenn ich die click-funktion am anfang loslasse, funktionieren die funktionen im fancybox call einwandfrei.
Nicht wirklich! Ich brauche den Rest der Elemente in der Fancybox-Funktion, um die Fenstergröße zu steuern und die Funktion aufzurufen, um innerhalb des modalen Fensters zu arbeiten. – DanC
Ich bin mir ziemlich sicher, dass Sie all das in den GET-Parametern der URL kontrollieren können. Ich habe ein Beispiel in das obige eingefügt. – Jesta