webForumDet fria alternativet

Jquery, vissa länkar startar inte funktion

JavaScriptur Javascript

2 svar · 392 visningar · startad av Mika3l

Mika3lMedlem sedan nov. 20018 492 inlägg
#1

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);
    //  })

});
#fullimage {
    position: absolute;
    background: #2e2e2e url('/Images/loader.gif') no-repeat center;
    width:  750px;
    min-height:  550px;
    z-index:  100;
}

#thumbsdiv {
    position: absolute;
    background:  #2e2e2e;
    width:  750px;
    min-height:  550px;
    z-index:  1;   
}

li.loading {
    background: url('/Images/loader.gif') no-repeat center center;
}

ul#thumbs
{
    clear: both;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
}

    ul#thumbs li 
    {
        list-style-type: none;
        float: left;
        padding: 0;
        margin-bottom: 7px;
        margin-right: 7px;
        width: 143px;
        height: 95px;
    }

        ul#thumbs li a 
        {
            text-decoration: none;
            line-height: 0em;
            background-color: #202020;
            color: #dadada;
            display: block;
        }
        ul#thumbs li a:hover 
        {
            background-color: #fafafa;
        }
        ul#thumbs li a:active {
            background-color: #ffffff;
            text-decoration: none;
        }

.thumb 
{
//  	opacity: 0.8;
//    filter: alpha(opacity=80);
	width: 143px;
	height: 95px;
	border: 0;
	margin: 0;
	padding: 0;
}
.thumb:hover 
{
    opacity: 0.75;
	filter: alpha(opacity=75);
}
.thumblink {
    background:  pink;
    border:  0;
}
voigtann1Medlem sedan juni 20019 519 inlägg
#2

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+):

    $('ul#thumbs').on('click', ".thumblink", function() {
        alert("get");
        $("#fullimage").fadeIn(500);
      return false;
    });

om du kör äldre version:

    $('ul#thumbs').delegate(".thumblink", 'click', function() {
        alert("get");
        $("#fullimage").fadeIn(500);
      return false;
    });
Mika3lMedlem sedan nov. 20018 492 inlägg
#3

Hälja!! En får tacke'! :)

136 ms totalt · 3 externa anrop · v20260731065814-full.a2ca460b
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)