Arbetar med ett script som har fungerat finfint men nu går det helt plötsligt inte att starta en funktion med vissa länkar. Skapar en lista med klickbara thumbnails men funktionen vägrar dra igång, inte ens att ange bara "a" fungerar.
På andra länkar så fungerar det utmärkt, någon som kan lyckas luska ut vad felet kan tänkas vara? Jag gissar på Jquery så därför jag lägger det här, visar det sig vara CSS så får väl tråden flyttas. :)
$(document).ready(function() {
//HIDE FULL IMAGE DIV ON START
$("#fullimage").hide();
var loadThumbs = function(element, images) {
$(images).each(function(index, image) {
// create the LI programatically
var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');
// append the new LI to UL
$(element).append(listItem);
// new image
var img = new Image();
// load image
var $img = $(img)
.wrap("<a/>")
.css('display', 'none')
.addClass("thumb")
.attr('src', '/Images/thumb_' + image.name)
.load(function() {
listItem.removeClass('loading').append(this);
$img
.fadeIn()
.wrap("<a/>")
.parent()
.attr("href", '#')
.attr("title", image.title)
.addClass("thumblink");
}).error(function() {
listItem.remove();
});
});
};
$(function() {
var imgfirst = [
{ name: 'ex1.png', title: 'test' },
{ name: 'ex2.png', title: 'test' },
{ name: 'ex3.png', title: 'test' },
{ name: 'ex4.png', title: 'test' },
{ name: 'ex5.png', title: 'test' },
{ name: 'ex4.png', title: 'test' }
//{ name: '', title: '' },
];
loadThumbs('ul#thumbs', imgfirst);
});
//OPEN FULL IMAGE ON THUMBNAIL CLICK
$(".thumblink").click(function() {
alert("get");
$("#fullimage").fadeIn(500);
});
//CLOSE FULL IMAGE ON LINK CLICK
// $("#close").click(function() {
// $("#fullimage").fadeOut(500);
// })
});
Det är för att bilderna inte finns när du kör ditt skript (du kör load, det är när bilden finns, inte när DOM:en är redo). lös det enklast med en delegate (on i jquery 1.7+):