webForumDet fria alternativet

Jquery, vissa länkar startar inte funktion

JavaScriptur Javascript

2 svar · 392 visningar · startad av Mika3l

Medlem sedan nov. 20018 492 inlägg
Frågan#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;
}
Medlem 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;
    });
Medlem sedan nov. 20018 492 inlägg
#3

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

248 ms totalt · 3 externa anrop · v20260731065814-full.25f56b17
129 ms — hämta forumlista (db)
117 ms — hämta statistik (db)
123 ms — hämta tråd, inlägg och bilagor (db)