5 Replies - 1910 Views - Last Post: 03 August 2013 - 12:44 PM

#1 silvercats   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 33
  • Joined: 08-January 12

How to rotate image maps like normal images with Jquery?

Posted 29 July 2013 - 12:14 AM

I have used a javascript to rotate images. when I add an image map areas to the images, it won't show up on the rotating javascript images. I have Javascript rotating and image map on two different html files . Can I combine? so I would get an image map with rotating images. Code is attatched below in the .rar file.


rar
Is This A Good Question/Topic? 0
  • +

Replies To: How to rotate image maps like normal images with Jquery?

#2 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How to rotate image maps like normal images with Jquery?

Posted 30 July 2013 - 09:10 AM

I was not able to view your files because it was blocked with my virus scan. Can you post your relevant code using the code tags so we can possibly help better.
Was This Post Helpful? 2
  • +
  • -

#3 silvercats   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 33
  • Joined: 08-January 12

Re: How to rotate image maps like normal images with Jquery?

Posted 30 July 2013 - 09:22 AM

I can assure you that it doesn't have any viruses at all. Because it has two html files,few scripts and images, it is better to download.
Thanks.

This post has been edited by silvercats: 30 July 2013 - 09:24 AM

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How to rotate image maps like normal images with Jquery?

Posted 30 July 2013 - 09:25 AM

I still cant help unless I can see the code. I am unwilling to go against my virus scan to check some code. If you don't want to post your code then I will not be able to help.

Did you write the script to rotate images or are you using a 3rd party script? If you are using a third party script, what is it?
Was This Post Helpful? 2
  • +
  • -

#5 silvercats   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 33
  • Joined: 08-January 12

Re: How to rotate image maps like normal images with Jquery?

Posted 30 July 2013 - 05:49 PM

This is the one I downloaded and used.
sample link.


(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].pageX;
                        } else {
                            options.currPos = e.pageX;
                        }
                        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 pageX;
                            if (e.type == "touchmove") {
                                pageX = window.event.targetTouches[0].pageX;
                            } else {
                                pageX = e.pageX;
                            }

                            var width_step = 4;
                            if (Math.abs(options.currPos - pageX) >= width_step) {
                                if (options.currPos - pageX >= width_step) {
                                    options.currImg++;
                                    if (options.currImg > imageTotal) {
                                        options.currImg = 1;
                                    }
                                } else {
                                    options.currImg--;
                                    if (options.currImg < 1) {
                                        options.currImg = imageTotal;
                                    }
                                }
                                options.currPos = pageX;
                                $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.
    }
}



This is one of the scripts.

This post has been edited by silvercats: 30 July 2013 - 05:51 PM

Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: How to rotate image maps like normal images with Jquery?

Posted 03 August 2013 - 12:44 PM

I believe your issue lies in the fact that you are adding a layer to your image with the coordinates in your image map. Even if you did get the Image and map to rotate in 3d, it would take a large amount of calculation to keep the image map coordinates accurate.
Was This Post Helpful? 3
  • +
  • -

Page 1 of 1