Jquery image swapping

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Jquery image swapping

newbie14
Dear All,
          I got a page here http://183.78.169.53/tyre2/page2.html. What I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position? Any idea?
Reply | Threaded
Open this post in threaded view
|

Re: Jquery image swapping

Heena

newbie14 wrote
Dear All,
          I got a page here http://183.78.169.53/tyre2/page2.html. What I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position? Any idea?
Try this

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    if (src != $('img#largeImg').attr('src')) {
        $('img#largeImg').stop().animate({opacity:'0'},function(){
                $(this).attr('src',src);
        });
    }
    return false;
});
Reply | Threaded
Open this post in threaded view
|

Re: Jquery image swapping

newbie14
Dear Heena,

I got my codes like below. My one problem when I drag and drop the problem in the process of dragging the image (tyre2.png) some sort got hidden below longJoin1.png. So how over come this problem ya. Then upon drag n drop sucesffully done I would like to dynamically add new row in separate div to let me know which row was swap with row and give a remove button incase I would like to remove then do the reverse. Can you help me on this?
[code]
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script> $(document).ready(function() { $('.draggable').draggable({helper: 'clone'}); $('.droppable').droppable({ drop: function(event, ui) { var dest = $(this).find('img').attr('src'); var hidden1=$(this).find('[name^="position"]').attr('value'); alert("Hidden 1 : "+hidden1+$(this).find('[name^="position"]').attr('name')); var source = ui.helper.attr('src'); $(this).html('<span><span><b>R11</b><img class="draggable" src="tyre2.png" ></span> '); ui.draggable.parent().html('<span><b>R11</b><img class="draggable" src="tyre2.png" ></span> '); $('.draggable').draggable({helper: 'clone'}); } }); }); </script>               

<div class="t1">
      <div class="t1 droppable">
    R11 
      </div>
   
   
   
    <div class="t1 droppable">
    R11
   

      </div>
     
    </div>
[/code]



Heena wrote
newbie14 wrote
Dear All,
          I got a page here http://183.78.169.53/tyre2/page2.html. What I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position? Any idea?
Try this

$('a.thumbnail').click(function(){
    var src = $(this).attr('href');
    if (src != $('img#largeImg').attr('src')) {
        $('img#largeImg').stop().animate({opacity:'0'},function(){
                $(this).attr('src',src);
        });
    }
    return false;
});