• I am trying to create an image gallery using basic html, javascript, and jquery. The thumbnails work fine (when they are clicked they turn opaque), but when they are clicked they are also suppose to show a preview of that thumbnail in a bigger size. But it doesn’t. The image loads, but does not display. (what I mean by that is that when a thumbnail is clicked the div in which the preview image is suppose to display in does not display anything. But when you view source on it, the appropriate image is in fact in that div….) Any idea as to why?

    The gallery contains two different areas. 1 area for the preview image to be displayed, and another area where all of the thumbnails reside. The preview image is in a div with a class of .selected_image and the thumbnails are in a div with a class of .thumbnail_image.

    Im loading up my JQuery library and code in the functions.php and it looks like this.

    // Load jQuery
    	if ( !is_admin() ) {
    	   wp_deregister_script('jquery');
    	   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"), false);
    	   wp_enqueue_script('jquery');
    
    	   wp_register_script('portfolio_gallery_js', get_bloginfo('template_directory') . "/js/gallery.js");
    	   wp_enqueue_script('portfolio_gallery_js');
    
    	}

    I have done a “view source” on the page to see if it is loading properly and everything checks out.

    This is the javascript code I am trying to get to work.

    // JavaScript Document
    
    $(document).ready(function(){
    
    	$('.thumbnail_image a').click(function(e){
    		e.preventDefault();
    
    		$('.thumbnail_image a').removeClass('selected');
    		$('.thumbnail_image a').children().css('opacity', '1');
    
    		$(this).addClass('selected');
    		$(this).children().css('opacity','.4');
    
    		// Sets up variables based on linked thumbnails
    		var photo_caption = $(this).attr('title');
    		var photo_fullsize = $(this).attr('href');
    		var photo_preview = photo_fullsize.replace('_fullsize','_preview');
    
    		$('.selected_image').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
    
    	});
    
    });

The topic ‘JQuery image gallery not displaying in wordpress’ is closed to new replies.