JavaScript Scrolling Photo Gallery

mikes63737 · May 30, 2007, 04:33 PM

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

angelwatt · May 30, 2007, 07:24 PM

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!

mikes63737 · Jun 1, 2007, 06:03 AM

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.

yagran · Jun 1, 2007, 08:35 AM

Quote:

Originally Posted by mikes63737

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.

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

yagran · Jun 1, 2007, 08:44 AM

looking at apples scroller you could just erm..borrow theirs.

in your <head> section put:

HTML Code:

<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 Code:

<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

Scottyv · Sep 13, 2009, 12:36 AM

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

May 30, 2007, 04:33 PM	#1
mikes63737 macrumors 6502a Join Date: Jul 2005	JavaScript Scrolling Photo Gallery 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 __________________ Bring back base-2 file sizes in 10.6 - http://www.apple.com/feedback/macosx.html

Jun 1, 2007, 06:03 AM	#3
mikes63737 Thread Starter macrumors 6502a Join Date: Jul 2005	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. __________________ Bring back base-2 file sizes in 10.6 - http://www.apple.com/feedback/macosx.html

Sep 13, 2009, 12:36 AM	#6
Scottyv macrumors newbie Join Date: Sep 2009	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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

May 30, 2007, 07:24 PM	#2
angelwatt macrumors 601 Join Date: Aug 2005 Location: Dayton, OH	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!