i am at the finish of my very first javascript and have been able to get everything working except one last bug. i have this script that calls for an overlay to display full preview of images, and a button to zoom-in/out and a button to go back. the trouble is when i first view the full image, the zoom in/out toggle works fine. but when i go back to the thumbnails and launch another image, the zoom-in/out does not work.
let me also explain the DOM tree:
overlay(parent)>>imgContainer>>imgCanvas(draggable)>>img
may be some code would help my case...can anyone tell me what i may be doing wrong here.
//enables the zoom-in/zoom-out toggle function
$('#Zoom').toggle(function() {
img.removeAttribute("height");
$("#draggable").draggable();
iconZ.setAttribute("src", "nav/nav-zoom-out.gif");
},
function() {
img.setAttribute("height", "270px");
$("#draggable").draggable('destroy');
$("#draggable").animate(
{ "left": $("#draggable").data("Left"), "top": $("#draggable").data("Top")}, "slow");
iconZ.setAttribute("src", "nav/nav-zoom.gif");
});
//navigates back to the thumbnails
home.addEventListener('click', function() {
$('imgCanvas').remove();
imgContainer.removeChild(imgCanvas);
overlay.removeChild(imgContainer);
$('#overlay').removeClass("on");
}
, false);