jQuery appending and removing element

[[dx]]

Hi, I'm trying to make effect of showing image with jQuery.Now I'm using this script.

$('.thumb_img').click(function() {  var n = $(this).attr('src').replace('thumb_', '');  $('body').append('<div class="pic_preview"></div>');  $('.pic_preview').fadeTo('slow', 0.9);  $('body').append('<img id="pic_src" src="'+n+'">');  $('#pic_src').fadeIn('slow').css('visibility', 'visible');});$('body').keyup(function(e) {  if (e.which == 27) { // ESC key	$('#pic_src').fadeOut('fast', function() {	  $(this).fadeOut('fast', function() {		$(this).remove();	  });	  $('.pic_preview').fadeTo('fast', 1.0).fadeOut('slow', function() {		$(this).remove();	  });	});  }}); 

So it works fine, shows image etc., except when first time click on thumb, big image in #pic_src is shown slowly with fadeIn, and when I ESC it, and then click again on same thumb, image is just shown without fade. In CSS, I'm using visibility: hidden for #pic_src Regards.

Edited May 11, 2012 by Haris S

[dsonesuk]

The problem is everytime you click a thumbnail a new '.pic_preview' div is created AND image with identical id reference is created also, and shouldn't the image be inside the '.pic_preview' I think you are looking for this if i have read this correctly

$('.thumb_img').click(function() {  var n = $(this).attr('src').replace('thumb_', '');   $('.pic_preview').remove(); // prevent duplicate.pic_preview and img with pic_src   $('body').append('<div class="pic_preview"></div>');   $('.pic_preview').append('<img id="pic_src" src="'+n+'">'); // append image in div not body   $("#pic_src").hide(); // hide image  $('.pic_preview').fadeTo('slow', 0.9);   $('#pic_src').fadeIn('slow').css('visibility', 'visible');});

with $('.pic_preview').fadeTo('slow', 0.9); it shudders from one effect to another, so i suggest removing this completely

[[dx]]

But what if I do fadeTo, will image fade also as a child of .pic_preview?That's reason becouse I've avoided to append it to .pic_preview.

[dsonesuk]

I don't know? what is the purpose of the pic_preview? to preview what? you have thumbnails, where are these placed, are these supposed to go in the preview?, what is the purpose of the 0.9 fade? if you remove it as i suggested that problem goes away as it is only the image that fades in and out. Input, Input need input

[[dx]]

Argh.. .pic_preview is 100% width and 100% height div with white background, which covers all data on site with z-index: 1000, and img has z-index 1001.

[dsonesuk]

Argh...so basically a lightbox image pop-up, see how easy it becomes when you explain what this is, and what this does. For fadein and fadeout to work display none; is required, and hide() reproduces this, I can't get the fadeIn on the first image click to work with your first script in firefox at all, but in chrome, safari it does reproduce your problem, I think it works first time because the image has not been loaded before and is sort of given the same result as using display: none, the second time the image is stored in cache so it appears instantly. So by just adding $("#pic_src").hide(); after image is appended sets as display none and it works in all browsers as it should. Edit: also consider using $(document).keyup(function(e) instead, as there seems to be a problem in FF when using $('body').

Edited May 12, 2012 by dsonesuk

[[dx]]

Well, it's solved, and after I append this image, also I append some thumbnails next to image.And I have $('.thumb').click(function() { }); but script don't respond to any click. Image is added with class thumb. I'm guessing it is becouse it's appended and not loaded by page. How to activate click? I've tried with .trigger() and .bind() as it's in example on jQuery tutorial site.

Edited May 12, 2012 by Haris S

[dsonesuk]

stop(true,true) makes the animation finish completely, and stops any animation queue so you don't when thumb clicked multiple times, going through the number of queue triggered by clicks, and problem with opacity becoming stuck between opacity 0 to 1. forget about <div id="v_align"> i was experiment to have it vertical aligned, works in FF, opera, no chrome for some reason

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function()    {    $('.thumb_img').click(function()        {         var n = $(this).attr('src').replace('thumb_', '');           var t = $(this);     $('body').append('<div class="pic_preview"></div>');     $('.pic_preview').fadeTo('slow', 0.9);     $('body').append('<div id="v_align"><img id="pic_src" src="'+n+'"></div>');      $(".thumb_img").each(function()        {          $(this).clone().removeClass("thumb_img").addClass("thumb").appendTo('#v_align');         });   //$('body').append('<img id="pic_src" src="'+n+'">');      $("#pic_src").hide();      $('#pic_src').css('margin-top', '-'+parseInt(($("#pic_src").height()/2))+'px');      $('#pic_src').stop(true,true).fadeIn('slow').css('visibility', 'visible');         $('.thumb').click(function()         {         $("#pic_src").attr('src', $(this).attr('src').replace('thumb_', ''))              $("#pic_src").hide();      $('#pic_src').stop(true,true).fadeIn('slow').css('visibility', 'visible');                        });         });        $(document).keyup(function(e)            {                  if (e.which == 27)                { // ESC key	            $('#pic_src').fadeOut('fast', function()                    {		              $(this).fadeOut('fast', function()                        {			            $(this).remove();                        $("#v_align").remove();		                  });		              $('.pic_preview').fadeTo('fast', 1.0).fadeOut('slow', function()                        {			            $(this).remove();		                  });	                });                  }            });    });function showthis(n)    {    }/*--*//*]]>*/</script><style type="text/css">body, html {height: 100%;}#pic_src { visibility:hidden;}.pic_preview { position:absolute; top:0; left:0; right:0; bottom:0; background-color:#000; z-index:1000;}#v_align { position:absolute; top:0; left:0; right:0; bottom:0; vertical-align:middle; text-align:center;z-index:1000;}#pic_src {position:relative; z-index:1055; top: 50%; bottom:50%;}</style></head><body><img src="../ovtesting/tabmenu/thumb_imgview1.jpg" width="106" height="64" class="thumb_img"><img src="../ovtesting/tabmenu/thumb_imgview2.jpg" width="106" height="64" class="thumb_img"><img src="../ovtesting/tabmenu/thumb_imgview3.jpg" width="106" height="64" class="thumb_img"></body></html>

Edited May 12, 2012 by dsonesuk

[[dx]]

Solved, it was .live instead of .bind Copied from some support site:

The main difference is that live will work also for the elements that will be created after the page has been loaded (i.e. by your javascript code), while bind will only bind event handlers for currently existing items.

[[dx]]

To not open other topic, I'll post here.. I have:

$('.thumb_img').click(function() {   ...   var pic_name = $(this).attr('src').replace('thumb_', '');   $('#pic_src').load(function(){	  console.log('src set on pageload: '+pic_name);	  $(this).attr('src', pic_name);  });  ...});

Then I have:

$('.thumb_prev').live('click', function() {   var src = $(this).attr('src');   $('#pic_src').animate({opacity: 0}, 300, 'linear', function() {	  $(this).attr('src', 'loader.gif');	  console.log('new src: '+src);	  $(this).attr('src', src.replace('thumb_', '')).load(function() {		 $(this).stop(true, true).animate({opacity: 1}, 600);	  });   });});

So, I have list of images with class thumb_img and when you click on it, you get preview (bigger) of image.So next to big image are thumbnail with class thumb_prev. Then when I click on thumb_prev it catchs it's src and change central image with id pic_src. My output in console is like.. src set on pageload: 1.jpgsrc set on pageload: 1.jpg After click getting this: new src: 2.jpg <-- this is OKsrc set on pageload: 1.jpg <-- same url as pageloadsrc set on pageload: 1.jpg <-- same url as pageload Why it call .load() from .thumb_img if I click .thumb_prev?

Edited May 14, 2012 by Haris S

[[dx]]

Found a way of unseting pic_name after set on pageload, and add checking if (pic_name) then set.