Avatar of Mamarazzi
MamarazziFlag for Sweden

asked on 

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

Avatar of undefined
Last Comment
Mamarazzi
Avatar of SRigney
SRigney
Flag of United States of America image

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.

Avatar of SRigney
SRigney
Flag of United States of America image

You should preload your images to make it smoother.  http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
Avatar of Mamarazzi
Mamarazzi
Flag of Sweden image

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?
Avatar of SRigney
SRigney
Flag of United States of America image

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);
Avatar of Mamarazzi
Mamarazzi
Flag of Sweden image

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.
Avatar of Mamarazzi
Mamarazzi
Flag of Sweden image

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
Avatar of SRigney
SRigney
Flag of United States of America image

Blurred text
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
Avatar of Mamarazzi
Mamarazzi
Flag of Sweden image

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

Avatar of Mamarazzi
Mamarazzi
Flag of Sweden image

ASKER

Partially complete solution but led me to the correct solution.
jQuery
jQuery

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

19K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo