Solved

Javascript and function initiating

Posted on 2010-11-21
4
526 Views
Last Modified: 2012-05-10
I have multilple js files loading into my webpage... they all worki fine together but as soon as i add this to run first it stops the others working....

Attached is the entire code... im a complete beginner when it comes to javascript... is there any reason why this would stop the others working!?

jQuery.noConflict()

var ddpowerzoomer={
      dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
      mousewheelevt: (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
      $magnifier: {outer:null, inner:null, image:null},
      activeimage: null,

      movemagnifier:function(e, moveBol, zoomdir){
            var activeimage=ddpowerzoomer.activeimage //get image mouse is currently over
            var activeimginfo=activeimage.info
            var coords=activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
            var $magnifier=ddpowerzoomer.$magnifier
            var magdimensions=activeimginfo.magdimensions //get dimensions of magnifier
            var power=activeimginfo.power.current
            var powerrange=activeimginfo.power.range
            var x=e.pageX-coords.left //get x coords of mouse within image (where top corner of image is 0)
            var y=e.pageY-coords.top
            if (moveBol==true){
                  if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom)  //if mouse is within currently within boundaries of active base image
                        $magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2})      //move magnifier so it follows the cursor
                  else{ //if mouse is outside base image
                        ddpowerzoomer.activeimage=null
                        $magnifier.outer.hide() //hide magnifier
                  }
            }
            else if (zoomdir){ //if zoom in
                  var od=activeimginfo.dimensions //get dimensions of image
                  var newpower=(zoomdir=="in")? Math.min(power+1, powerrange[1]) : Math.max(power-1, powerrange[0]) //get new power from zooming in or out
                  var nd=[od[0]*newpower, od[1]*newpower] //calculate dimensions of new enlarged image within magnifier
                  $magnifier.image.css({width:nd[0], height:nd[1]})
                  activeimginfo.power.current=newpower //set current power to new power after magnification
            }
            power=activeimginfo.power.current //get current power
            var newx=-x*power+magdimensions[0]/2 //calculate x coord to move enlarged image
            var newy=-y*power+magdimensions[1]/2
            $magnifier.inner.css({left:newx, top:newy}) //move image wrapper within magnifier so the correct image area is shown
      },

      setupimage:function($, imgref, options){
            var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)
            var $imgref=$(imgref)
            imgref.info={ //create object to remember various info regarding image
                  power: {current:s.defaultpower, range:s.powerrange},
                  magdimensions: s.magnifiersize,
                  dimensions: [$imgref.width(), $imgref.height()],
                  coords: null
            }
            $imgref.unbind('mouseenter').mouseenter(function(e){ //mouseenter event over base image
                  var $magnifier=ddpowerzoomer.$magnifier
                  $magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1]}) //set magnifier's size
                  var offset=$imgref.offset() //get image offset from document
                  var power=imgref.info.power.current
                  $magnifier.inner.html('<img src="'+options.largeimagesrc+'"/>') //get base image's src and create new image inside magnifier based on it
                  $magnifier.image=$magnifier.outer.find('img:first')
                        .css({width:imgref.info.dimensions[0]*power, height:imgref.info.dimensions[1]*power}) //set size of enlarged image
                  var coords={left:offset.left, top:offset.top, right:offset.left+imgref.info.dimensions[0], bottom:offset.top+imgref.info.dimensions[1]}
                  imgref.info.coords=coords //remember left, right, and bottom right coordinates of image relative to doc
                  $magnifier.outer.show()
                  ddpowerzoomer.activeimage=imgref
            })
      },

      
      init:function($){
            var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
                  .append('<div style="position:relative;left:0;top:0;" />')
                  .appendTo(document.body) //create magnifier container and add to doc
            ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //reference and remember various parts of magnifier
            $magnifier=ddpowerzoomer.$magnifier
            $(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //bind mousemove event to doc
                  if (ddpowerzoomer.activeimage){ //if mouse is currently over a magnifying image
                        ddpowerzoomer.movemagnifier(e, true) //move magnifier
                  }
            }) //end document.mousemove

            $magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //bind mousewheel event to magnifier
                  if (ddpowerzoomer.activeimage){
                        var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
                        if (delta<=-120){ //zoom out
                              ddpowerzoomer.movemagnifier(e, false, "out")
                        }
                        else{ //zoom in
                              ddpowerzoomer.movemagnifier(e, false, "in")
                        }
                        e.preventDefault()
                  }
            })
      }
} //ddpowerzoomer

jQuery.fn.addpowerzoom=function(options){
      var $=jQuery
      return this.each(function(){ //return jQuery obj
            if (this.tagName!="IMG")
                  return true //skip to next matched element
            if (typeof options=="undefined")
                  options={}
            if (options.largeimage && options.largeimage.length>0){ //preload large image?
                  options.preloadimg=new Image()
                  options.preloadimg.src=options.largeimage
            }
            var $imgref=$(this)
            options.largeimagesrc=(options.preloadimg)? options.preloadimg.src : $imgref.attr('src')
            if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
                  ddpowerzoomer.setupimage($, this, options)
            else if (this.complete){ //account for IE not firing image.onload
                  ddpowerzoomer.setupimage($, this, options)
            }
            else{
                  $imgref.bind('load', function(){
                        ddpowerzoomer.setupimage($, this, options)
                  })
            }
      })
}

jQuery(document).ready(function($){ //initialize power zoomer on DOM load
      ddpowerzoomer.init($)
})
0
Comment
Question by:maccaj51
  • 2
4 Comments
 

Author Comment

by:maccaj51
ID: 34183112
<script type="text/javascript">

jQuery(document).ready(function($){ //fire on DOM ready
      $('img-gallery-img-1').addpowerzoom({magnifiersize:[150,150]})
      $('img-gallery-img-2').addpowerzoom({magnifiersize:[150,150]})
      $('img-gallery-img-3').addpowerzoom({magnifiersize:[150,150]})
      $('img-gallery-img-4').addpowerzoom({magnifiersize:[150,150]})
      
})

</script>

this has to be in the head section... seems to be playing a role!!!!
0
 
LVL 22

Accepted Solution

by:
remorina earned 500 total points
ID: 34185111
The code you are using seems to be jQuery while you are using jQuery.noConflict(); before it.

the jQuery.noConflict(); should only be used before JavaScript that isn't jQuery so it wouldn't conflict with the $ Selector.

try removing the jQuery.noConflict(); at the top and see if this makes it work, also using a console debugger like FireFox firebug add-on might help you figure out what is causing the error.

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34189636
Can you post the code for the rest of the page?
0
 

Author Closing Comment

by:maccaj51
ID: 34291531
worked for me!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question