www.webdeveloper.com
Results 1 to 3 of 3

Thread: Jquery hover problem with array of thumbnails

  1. #1
    Join Date
    Feb 2012
    Location
    London
    Posts
    8

    Jquery hover problem with array of thumbnails

    Hi,
    I'm having problems with a function and not sure what the answer is. The function is as follows:

    Code:
    function display (array) {
    	for (i=0, max = array.length; i<max; i++){	
    		var galleryTitle=array[i][3];
    		var gallerySize=array[i][2];
    		var galleryDate=array[i][1];
    		var galleryDescription=array[i][4];
    		
    		$('#container').append(
    		
    		'<div id="'+array[i][0]+'" style="position: absolute;  left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src=images/'+array[i][5]+'></a></div>'
    		);
    		
    		$("#"+i).hover( 
    			function () { 
    				$(this).append('<div id="description"><b>Title: </b>'+galleryTitle+'<br /><b>Images: </b>'+gallerySize+'<br /><b>Date: </b>'+galleryDate+'<br /><br />'+galleryDescription+'</div>');
    			},  	
    
    			function () { 
        			$(this).find("div:last").remove(); 
    			} 
    		);
    	}
    }
    What I'm trying to do is cause a css box to appear with information about a thumbnail in it, whenever that particular thumbnail is hovered over.

    The information and, indeed, the urls of the thumbnails are stored in an array at the start of the script.

    The code above works and the css box appears *except* whichever thumb I hover over, only information about the thumbnail identified by the last iteration (is that the right word?) of the for loop appears.

    I understand why this is happening (ie, the loop is finished by the time the hover statement comes into being and so 'i' will always be set to the last value) but I can't work out what to do about it. I've tried inserting get element by id calls within the first div but this just seems to knock out the entire script.

    I'm happy to post the script in its entirety up here if that helps but thought I;d just hit you all with the bare minimum first.

    Any ideas where I should be heading on this?

    Many thanks
    Stef

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Where in your HTML markup does elements with IDs #1, #2, #3 appear?

  3. #3
    Join Date
    Feb 2012
    Location
    London
    Posts
    8

    resolved

    Hi,
    The IDs were defined in the initial array (taken from the database).

    Have now resolved this. Was to do with closure issues in the for loop. By replacing the for loop with jquery each it seems to have been resolved.

    Thanks for the interest anyway
    Stef

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles