Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

JavaScript Scrolling Photo Gallery

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!
 
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.
 
mikes63737 said:
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.
Click to expand...

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

Attachments

  • scrollinator.js.zip
    1.4 KB · Views: 7,296
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
 
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.


yagran said:
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
Click to expand...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back