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.
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?
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());
}
});
});
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.dragga
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)
before this do
$(this).append($(ui.dragga
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)
You should preload your images to make it smoother. http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
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
</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?
The code on the draggable side:
<div class="thumb">
<img src="<?=$APP->illustration
</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?
You can replace the -tb with -m in jQuery.
var largeSlide = $(ui.draggable).clone();
$(largeSlide).attr("src", $(largeSlide).attr("src").
$(this).append(largeSlide)
var largeSlide = $(ui.draggable).clone();
$(largeSlide).attr("src", $(largeSlide).attr("src").
$(this).append(largeSlide)
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.
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?
Maybe. You can tweak the selector
$(largeSlide).attr("src", $(largeSlide).attr("src").
to be (this is also where the right paren was missing).
$(largeSlide).find("img").
$(largeSlide).attr("src", $(largeSlide).attr("src").
to be (this is also where the right paren was missing).
$(largeSlide).find("img").
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!
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);
}
});
});
Premium Content
You need an Expert Office subscription to comment.Start Free Trial