jquery - changing source of clone

Mamarazzi
Mamarazzi used Ask the Experts™
on
I am new to jquery and I have created a drag-and drop function that copies small images from one area to antoher and also mkaes an insert in a database table. All is fine except for one detail that I cannot figure out.
I have two versions of each image (and the images represent data in the database), one thumb version (60 x 60 px)and one larger (140 x 140 px).

In the draggable area there are small images and in the droppable large ones. I want the image to change frpm small to large when i append them without doing a page reload.

I can either use the same image and change width and height or use two different image files. It doesn't matter, what ever is easiest to handle

Any ideas?
//Drag and drop from minlista to program part
	$(function() {	
		$("#minlista .thumb").draggable({
			helper: 'clone',
			opacity: 0.6, 
			cursor: 'move'
		});

		$("#exclist_open").droppable({
		   tolerance: 'touch',   
		   accept: '#minlista .thumb',
		   drop: function(ev, ui){
			  var id =  ui.draggable.find("img").attr("id");
			  var pp_id = $(this).find("div").attr("id");
			  var add_exc = '&exc_id=' + id + '&program_part_id='+ pp_id +'&action=addExcToPart';
			  //window.location.reload(true);
			  $.post("updateDB.php", add_exc); 
			  $(this).append($(ui.draggable).clone());
		   } 
		});
	});

Open in new window

2011-05-16-18-44-40.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Have you tried changing the source from the thumbnail to the larger image?   Are they named in a way that it can be done?  

before this do
$(this).append($(ui.draggable).clone());

do something like
var largeSlide = $(ui.draggable).clone();  // clone the small slide into the largeSlide object.
$(largeSlide).attr("src", $(largeSlide).attr("src") + "large");  // change the source attribute on the cloned object.
$(this).append(largeSlide);  // append the cloned object with the different source to the droppable location.

Commented:
You should preload your images to make it smoother.  http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html

Author

Commented:
Not sure I understand, but I just got an idea. Maybe I could store the source of the larger image in another attribute.

The code on the draggable side:
<div class="thumb">
     <img src="<?=$APP->illustration_url?><?=$lrow['filename'].'-tb.'.$lrow['file_ext']?>" alt="<?=$lrow['exc_name']?>" title="<?=$lrow['exc_name']?>" id="<?=$lrow['exc_id']?>"/>  
</div>

The larger image has the exact same filename except for -m. instead of -tb. before the file extension.

Another idea I had was to use the large image from the beginning but change width and height. Or is there a way to replace the string -tb. for -m. in jquery?
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Commented:
You can replace the -tb with -m in jQuery.  

var largeSlide = $(ui.draggable).clone();  
$(largeSlide).attr("src", $(largeSlide).attr("src").replace('-tb', '-m' );
$(this).append(largeSlide);

Author

Commented:
Hmmm... somthing isn't right. There is a right parenthesis missing I think and now the cursor freezes after dropping the image. And the image doesn't snap to place.

Author

Commented:
I can't get the image to change without reloading the page. Maybe the problem is that the draggable element is a div and inside it is the image?
Commented:
Maybe.  You can tweak the selector

$(largeSlide).attr("src", $(largeSlide).attr("src").replace('-tb', '-m' );

 to be  (this is also where the right paren was missing).
$(largeSlide).find("img").attr("src", $(largeSlide).attr("src").replace('-tb', '-m' ));

Author

Commented:
Finally got it working!

The problem was that the draggable element was the div and I tried to change src of that. With your last code and a little modification of the css, it works now.

Thanks a lot!


//Draggable area
<div class="thumb">
    <img src="<?=$APP->illustration_url?><?=$lrow['filename'].'-tb.'.$lrow['file_ext']?>" alt="<?=$lrow['exc_name']?>" title="<?=$lrow['exc_name']?>" id="<?=$lrow['exc_id']?>" class="thumbImage"/>
</div>

//Jquery
$(function() {	
    $("#minlista .thumbImage").draggable({
        helper: 'clone',
	opacity: 0.6, 
	cursor: 'move'
    });

    $("#exclist_open").droppable({
        tolerance: 'touch',   
	accept: '#minlista .thumbImage',
	drop: function(ev, ui){
	    var exc_id =  ui.draggable.attr("id");
	    var pp_id = $(this).find("div").attr("id");
	    var add_exc = '&exc_id=' + exc_id + '&program_part_id='+ pp_id +'&action=addExcToPart';
	    //window.location.reload(true);
	    $.post("updateDB.php", add_exc); 
	    var largeSlide = $(ui.draggable).clone();  
	    $(largeSlide).attr("src", $(largeSlide).attr("src").replace('-tb', '-m' )); 
	    $(this).append(largeSlide);
	} 
    });
});

Open in new window

Author

Commented:
Partially complete solution but led me to the correct solution.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial