asked on 5/16/2011

jquery - changing source of clone

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

jQuery

Last Comment

Mamarazzi

5/17/2011

SRigney

5/17/2011

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.

SRigney

5/17/2011

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

Mamarazzi

5/17/2011

ASKER

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?

SRigney

5/17/2011

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);

Mamarazzi

5/17/2011

ASKER

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.

Mamarazzi

5/17/2011

ASKER

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?

ASKER CERTIFIED SOLUTION

SRigney

5/17/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Mamarazzi

5/17/2011

ASKER

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

Mamarazzi

5/17/2011

ASKER

Partially complete solution but led me to the correct solution.