Drop and Drag slideshow
Drop and Drag slideshow
hi ,
I made a slide show drag drop able but when I drag from left slide show the image goes hide until I drop it in the down slide show , I want to make it visible .
please see the link below :
http://www.persianinfotech.com/drop/BuyEquipment.htm
- jQuery(document).ready(function () {
$('#BuyEquipmentLeftSlideShow img').mouseup(function () { alert("test"); });
$('#BuyEquipmentLeftSlideShow img').draggable({ helper: "clone", opacity: "0.5" });
jQuery('.first-and-second-carousel').jcarousel();
jQuery('#third-carousel').jcarousel({
vertical: true
});
$('#BuyEquipmentDownSlideShow').droppable({ drop: function () { alert("Drooped") } });
});
</script>
</head>
<body>
<div id="BuyEquipment">
<div id="BuyEquipmentContent">
<div id="BuyEquipmentContentRight">
نام قطعه :
<label>
روغن موتور</label><br />
برند :
<label>
کاسترول</label><br />
مدل :
<label>
206</label><br />
ماشین های قابل پشتیبانی :
<label>
مزدا</label><br />
شتاب :
<label>
70</label><br />
قیمت :
<label>
30</label><br />
<input id="Submit1" type="submit" value="بخر" />
</div>
<div id="BuyEquipmentContentLeft">
<img alt="" src="" /></div>
</div>
<div id="BuyEquipmentLeftSlideShow">
<ul id="third-carousel" class="jcarousel-skin-tango">
<li>
<img src="Slideshow/image/image1.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image2.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image3.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image4.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image5.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image6.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image7.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image8.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
<div id="BuyEquipmentDownSlideShow">
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li>
<img src="Slideshow/image/image1.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image2.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image3.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image4.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image5.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image6.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image7.jpg" width="75" height="75" alt="" /></li>
<li>
<img src="Slideshow/image/image8.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</div>
</body>
</html>