JavaScript Scrolling Photo Gallery

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

Most Liked Posts
  1. mikes63737, May 30, 2007

    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
     
    share
    + Quote Reply
  2. angelwatt, May 30, 2007

    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!
     
    share
    + Quote Reply
  3. mikes63737, Jun 1, 2007

    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.
     
    share
    + Quote Reply
  4. yagran, Jun 1, 2007

    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
     
    share
    + Quote Reply
  5. yagran, Jun 1, 2007

    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:

    share
    + Quote Reply
  6. Scottyv, Sep 12, 2009

    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
     
    share
    + Quote Reply
  7. chaseholden, May 13, 2010

    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.


     
    share
    + Quote Reply
  8. hoyinsiu, Aug 27, 2010

    hoyinsiu macrumors newbie

    Joined:
    Aug 27, 2010
    #8
    how can i set the total width?
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page