JavaScript Scrolling Photo Gallery

Discussion in 'Web Design and Development' started by mikes63737, May 30, 2007.

  1. mikes63737 macrumors 65816

    Joined:
    Jul 26, 2005
    #1
    Does anyone know how to make a photo gallery like the one on http://www.apple.com/macbook/ilife.html? I want to put one on a site i'm working on. I tried to pick apart the page, but I couldn't narrow it down to just what I needed.

    Thanks!

    Mike
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Don't know that I've seen a scrolling photo gallery like that. Very cool looking. I didn't look very deep at it, but it appear that they use JavaScript to adjust the CSS on the individual images. In the source code you can see that they use the 'left' styling. It probably wouldn't take a ton of javascript to do it though, just have to think about it. I might try it out some time, but can't play with it right now. Good luck!
     
  3. mikes63737 thread starter macrumors 65816

    Joined:
    Jul 26, 2005
    #3
    I made one in with Flash that I was going to use temporairly, but when I saw the size of the Flash Document (500x200 px, 24 FPS, 850 Frames, and I know that that isn't the best way to do it) was 86 KB, I decided to go with that.
     
  4. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #4
    you can make it MUCH smaller than that in flash!
    i assume you just loaded all you pictures into the flash library and used keyframe tweens? you can achive the scrolling effect though one line of code..and a for loop to load the photos from a directory, i made something similar and ended up with a 12kb .swf, although an obvious way to achive this injust html would be to use <marquee>images</marquee> ? or has this been phased out of standard use?

    info on using marquee tag: http://www.scit.wlv.ac.uk/encyc/marquee.html
     
  5. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #5
    looking at apples scroller you could just erm..borrow theirs.

    in your <head> section put:

    HTML:
    <script type="text/javascript" src="scrollinator.js"></script>
    <script type="text/javascript">
    	function myInit() {
    		new AC.Scrollinator('scroller',
    		AC.Scrollinator.Strategies.Left,
    		$('scroller').getElementsByTagName('img') );
    	}
    	Event.observe(window, 'load', myInit, false);
    </script>
    
    then put in a div with id scroller in you page where you want the scroller to appear:
    HTML:
    <div id="scroller" class="scroller">
    <img src="eg1.jpg">
    <img src="eg2.jpg">
    <img src="eg3.jpg">
    </div>
    
    and upload the attached scrollinator.js

    dno if it would work and i dont know if that would count as copying :p
     

    Attached Files:

  6. Scottyv macrumors newbie

    Joined:
    Sep 12, 2009
    #6
    found this scroll on a kitchen web site that looked great

    images/cameoscroll/_prm_rs13_cameo.jpg

    FYI
    I was surfing for blog material on kitchens as I own and run a kitchen co. and found this which when I copied the prop address and search it ... it lead me to this form ... not much on this subject but... take a look and see this scroll .. the work looked good to me.

    Thanks
     
  7. chaseholden macrumors newbie

    Joined:
    May 13, 2010
    Location:
    Laguna Beach, CA USA
    #7
    Apple's Scrollinator.js Requires their Prototype.js

    It looks like Apple's Scrollinator javascript is not self contained and has dependencies for their Prototype javascript, which it looks like is the backbone of almost all of their fancy, brilliant javscripts, even the "Hot News" faders and iTunes style image faders.

    Note that JQuery has amazing abilities to do much more than this with a few lines of code and a reference to the JQuery.js library, freely available.


     
  8. hoyinsiu macrumors newbie

    Joined:
    Aug 27, 2010

Share This Page