jQuery-click-Ereignis auf das Bild, feuert nur einmal
Erstellte ich einen Blick auf Miniaturansichten. Wenn der Benutzer darauf klickt, möchte ich das Reale Bild, um pop-up in einem dialog. Das funktioniert die erste Zeit, aber sobald die jQuery 'auf' Feuer auf ein thumbnail es nie, feuert wieder, wenn ich ein reload der gesamten Seite. Ich habe versucht, das erneute binden des click-events auf den dialog schließen, dass das nicht hilft. Hier ist mein code:
$(document).ready(function()
{
$("#tabs").tabs();
$(".selector").tabs( {selected: 0} );
$("img.gallery").live('click',
function()
{
var src= $(this).attr('src');
var popurl = src.replace("thumbs/", "");
PopUpImage(popurl,$(this));
});
//Preload animation for browser cache
var ajaximg = new Image();
ajaximg.src = 'images/ajax-loader.gif';
});
function LoadProgramsAccordion()
{
$(function() {
$("#programsaccordion").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$(function() {
$("#programsaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$(function() {
$("#policiesaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$(function() {
$("#registrationaccordioninner").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
});
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
}
function LoadGalleryView()
{
$('img.gallery').each(function(){
$(this).hover(function(){
$(this).attr('style', 'height: 100%; width: 100%;');
}, function(){
$(this).removeAttr('style');
});
});
}
function CheckImage(img,html,source)
{
if ( img.complete )
{
$('#galleryProgress').html('');
var imgwidth = img.width+35;
var imgheight = img.height+65;
$('<div id="viewImage" title="View"></div>').html(html).dialog(
{
bgiframe: true,
autoOpen: true,
modal: true,
width: imgwidth,
height: imgheight,
position: 'center',
closeOnEscape: true
});
}
else
{
$('#galleryProgress').html('<img src="images/ajax-loader.gif" /><br /><br />');
setTimeout(function(){CheckImage(img,html);},50);
}
}
function PopUpImage(url,source)
{
var html = '<img src="'+url+'" />';
var img = new Image();
img.src = url;
if ( ! img.complete )
{
setTimeout(function(){CheckImage(img,html,source);},10);
}
}
PopUpImage() nur ausgeführt wird, das erste mal ein Bild geklickt wird, und ich kann nicht herausfinden, wie zu binden.
- haben Sie konstruiert eine einfache html-Seite, die sich auf genau diese Funktion/Problem, um auszuschließen, andere Möglichkeiten? Wenn dem so ist würde ich vorschlagen, dass die Entsendung. Wenn nicht, die helfen könnten, sieht es aus, mag es möglicherweise durch ein Problem mit einem Teil der Seite, die Sie noch nicht gezeigt
Du musst angemeldet sein, um einen Kommentar abzugeben.
OK, zuerst aus, umgestalten LoadProgramsAccordion.
Second,
$(function(){ ...
funktioniert genauso wie$(document).ready(){ function(){...,
im Hinterkopf behalten.$(document).ready()
feuert nur einmal - direkt nach dem laden der Seite. Also, wenn Sie anrufenLoadProgramsAccordion
mehrere Male, das innere Zeug wird nur einmal ausgeführt.Nächsten, hüten Sie sich vor
$(this)
, es können unerwartet ändern. Also dieser codegeändert werden soll wie folgt Aussehen:
Nächsten, die ich brauchen würde, um zu sehen PopUpImage. Sie haben gerade eine Menge Los, um herauszufinden, wo das Problem ist.
Chris, vielen Dank für das heads-up auf $(this), ich habe mich verändert, meine Programmierung, weil es. Für den rest, habe ich eingeschaltet, um die Lightbox für Ihren Vorschlag.