www.webdeveloper.com
Results 1 to 4 of 4

Thread: Fullscreen scaling image rollover

Hybrid View

  1. #1
    Join Date
    Oct 2010
    Posts
    10

    Fullscreen scaling image rollover

    Hi, I've investigated contacting the author, but it doesn't look like I'll get a swift response. The script I'm using is hosted here

    The script is designed to create a fullscreen, scaling background that can be used as a carousel gallery for images, with a caption that floats next to the mouse pointer that either reads 'next' or 'previous'.

    It works fine but I am attempting to alter the script to do a few things:

    1.Make the image take up a proportionate amount of window space - 85% (done)
    2.Get rid of the text which appears on rollover(done)
    3.Assign an image flip for the proportionally scaled image (this is the one I'm having problems with)

    I'm trying not to include too much information but it's hard to know where the problem is.

    I'm fairly sure this is used to set the scaler up on the page:

    Code:
    (function(){
    	var bg=document.getElementById('bg'),float=document.createElement('span'),scale=Scaler(bg);						//Create and bind scaler-function
    		addEvent=function(el,on,fn){el.attachEvent?el.attachEvent('on'+on,fn):el.addEventListener(on,fn,false)},	//Function for cross-borwser addEvent
    		move=function(e){
    			float.style.left=(e=e||window.event).clientX+20+'px';
    			float.style.top=e.clientY+20+'px';
    			if(float.nxt!=(e.clientX>(document.body.offsetWidth/2)))float.innerHTML=(float.nxt=!float.nxt)?'':'';	//Change html only if needed
    		},
    		swap=function(e){
    			var key=(e=e||window.event).type=='MouseOver'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
    			if(key>36&&key<41){
    				var data=scale(key>38?'+1':'-1'),l=data.els.length;
    				for(var i=0;i<l;i++)data.els[i].style.height=i==data.to?'85%':'0px';
    			}
    		}
    I've then used a simple imageflip function and implemented it here

    Code:
    	addEvent(bg,'mouseout',function('BNB_mouseon()'){float.style.display='none'});													//Hide floater when not over image
    	addEvent(bg,'mouseover',function('BNB_mouseon()'){float.style.display='block'});
    Where 'bg' stands for the background image div.

    I've been scratching my head about this for quite a while now, so any advice is appreciated!

  2. #2
    Join Date
    Oct 2010
    Posts
    10
    *bump*

    Please help me if you can - I've really tried to work out what's going wrong but I'm utterly stuck. If there's not enough info here just let me know.

    I wouldn't usually be such a pest on the forums but I've got a client getting increasingly impatient!

  3. #3
    Join Date
    Oct 2010
    Posts
    10
    Still no ideas?

    I'll let it drop if I don't get a response this time.

  4. #4
    Join Date
    Oct 2010
    Posts
    10
    Oh yes, I'm trying to impliment it on

    http://www.freddydewemathews.com/

    Which should give what I'm asking a little more context

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles