Link to home
Start Free TrialLog in
Avatar of Stiebel Eltron
Stiebel EltronFlag for Thailand

asked on

How to stop the animation of the attached link, using jQuery?

Dear EE experts,

We would like to ask for tech support on how to stop the animation from this link:
http://www.cssasia.info/ste/dan3d/index.html

What we want to happen is, when the user pulls-down the cover of the machine & reaches to cover the whole machine (except the small tube on the lower left), we would like to stop & not to return the cover at the top of it & need to pull it down again, if the user keeps on pulling the cover down. Unless the user push it up again.
Vice-versa, we would like to stop the animation when the cover reaches the top & shows the machine inside, (but the user must be able to pull it down again).
In short, we would like to stop its 360 rotation...

Here's the jQuery embed script of it:
(function($){
    $.fn.j360 = function(options) {
        var defaults = {
            clicked: false,
            currImg: 1
        }
        var options = jQuery.extend(defaults, options);
        return this.each(function() {
            var $obj = jQuery(this);
            var aImages = {};
            $obj.css({
                'margin-left' : 'auto',
                'margin-right' : 'auto',
                'text-align' : 'center',
                'overflow' : 'hidden'
            });
            // $obj.prepend('<img src="/images/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');

            $overlay = $obj.clone(true);
            $overlay.html('<img src="images/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');
            $overlay.attr('id', 'view_overlay');
            $overlay.css({
                'position' : 'absolute',
                'z-index': '5',
                'top' : $obj.offset().top,
                'left' : $obj.offset().left,
                'background' : '#fff'
            });
            $obj.after($overlay);
            $obj.after('<div id="colors_ctrls"></div>');
            jQuery('#colors_ctrls').css({
                'width' : $obj.width(),
                'position' : 'absolute',
                'z-index': '5',
                'top' : $obj.offset().top + $obj.height - 50,
                'left' : $obj.offset().left
            });

            var imageTotal = 0;
            jQuery('img', $obj).each(function() {
                aImages[++imageTotal] = jQuery(this).attr('src');
                preload(jQuery(this).attr('src'));
            })
            var imageCount = 0;
            jQuery('.preload_img').load(function() {
                if (++imageCount == imageTotal) {
                    $overlay.animate({
                        'filter' : 'alpha(Opacity=0)',
                        'opacity' : 0
                    }, 500);
                    $obj.html('<img src="' + aImages[1] + '" />');
                    $overlay.bind('mousedown touchstart', function(e) {
                        if (e.type == "touchstart") {
                            options.currPos = window.event.touches[0].pageY;
                        } else {
                            options.currPos = e.pageY;
                        }
                        options.clicked = true;
                        return false;
                    });
                    jQuery(document).bind('mouseup touchend', function() {
                        options.clicked = false;
                    });
                    jQuery(document).bind('mousemove touchmove', function(e) {
                        if (options.clicked) {
                            var pageY;
                            if (e.type == "touchmove") {
                                pageY = window.event.targetTouches[0].pageY;
                            } else {
                                pageY = e.pageY;
                            }

                            var width_step = 20;
                            if (Math.abs(options.currPos - pageY) >= width_step) {
                                if (options.currPos - pageY >= width_step) {
									options.currImg++;
                                    if (options.currImg > imageTotal) {
                                        options.currImg = 1;
										
                                    }
                                } else {
									options.currImg--;
                                    if (options.currImg < 1) {
                                        options.currImg = imageTotal;
                                    }
                                }
                                options.currPos = pageY;
                                $obj.html('<img src="' + aImages[options.currImg] + '" />');
                            }
                        }
                    });
                }
            });

            if (jQuery.browser.msie || jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.safari ) {
                jQuery(window).resize(function() {
                    onresizeFunc($obj, $overlay);
                });
            } else {
                var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
                window.addEventListener(orientationEvent, function() {
                    onresizeFunc($obj, $overlay);
                }, false);
            }
            onresizeFunc($obj, $overlay)

        });
    };
})(jQuery)

function onresizeFunc($obj, $overlay) {
    /*
	$obj.css({
        'margin-top' : $(document).height()/2 - 150
    });*/
    $overlay.css({
        'margin-top' : 0,
        'top' : $obj.offset().top,
        'left' : $obj.offset().left
    });

    jQuery('#colors_ctrls').css({
        'top' : $obj.offset().top + $obj.height - 50,
        'left' : $obj.offset().left
    });
}

function preload(image) {
    if (typeof document.body == "undefined") return;
    try {
        var div = document.createElement("div");
        var s = div.style;
        s.position = "absolute";
        s.top = s.left = 0;
        s.visibility = "hidden";
        document.body.appendChild(div);
        div.innerHTML = "<img class=\"preload_img\" src=\"" + image + "\" />";
    } catch(e) {
    // Error. Do nothing.
    }
}

Open in new window


and is it possible to do something like this, if the use click the white cover, it will automatically drag-up, then click the image of the machine it will automatically pull-down?

Thank you & hope to hear soon...
Avatar of Rob
Rob
Flag of Australia image

It is this part of your code that you need to change.  The first "if" statement is saying "if you reach the end go back to 1", then the "if" statement in the "else" section is saying "if I've reached the top go back to the bottom".
In other words instead of setting it to 1 when options.currImg > imageTotal, set it to imageTotal and vice versa set it to 0 when < 1

                            if (Math.abs(options.currPos - pageY) >= width_step) {
                                if (options.currPos - pageY >= width_step) {
									options.currImg++;
                                    if (options.currImg > imageTotal) {
                                        options.currImg = 1;
										
                                    }
                                } else {
									options.currImg--;
                                    if (options.currImg < 1) {
                                        options.currImg = imageTotal;
                                    }
                                }
                                options.currPos = pageY;
                                $obj.html('<img src="' + aImages[options.currImg] + '" />');
                            }

Open in new window

Avatar of Stiebel Eltron

ASKER

Hi there tagit!

We followed as per your advise, we changed it to '0', but when the image reached the end point (both - top & bottom), the whole image is gone, even the inside machine.

Hope to hear again soon...

Thank you!
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Excellent! Thank you so much!