;

PDA

Click to See Complete Forum and Search --> : Javascript Picture Gallery


Jetjaxon5
12-09-2006, 12:21 AM
Can anyone tell me how on the apple website link they made it so when you click either 17 inch, 20 inch, or 24 inch, the new image fades in?:

http://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/wa/RSLID?mco=709334A4&nclm=iMac

I looked at the code and saw where the 17 inch computer image is but I don't understand where they refer to the 20 and 24 inch and make it fade in.

Thanks for your help. I really appreciate it.

1stbite
12-09-2006, 05:31 PM
<script language="JavaScript" src="/rs/js/Gallery.js"></script>
<script>
var selectionGalleryConfig = {
initial : Gallery.TYPE_IMAGE,
viewer : {elementId : "selection-gallery-window"},
image : {
thumb : {elementId : "labels", cssClass : null, cssActiveClass : "active"},
full : {elementId : "selection-gallery-img-big"}

},
fade : {
speed : 6,
increment : 0.05

}
}

selectionGalleryConfig.images = new Array();

selectionGalleryConfig.images[0] = {full:"http://a248.e.akamai.net/7/248/2041/1164/store.apple.com/Catalog/US/Images/imac/img/product-17in.jpg"};

selectionGalleryConfig.images[1] = {full:"http://a248.e.akamai.net/7/248/2041/1164/store.apple.com/Catalog/US/Images/imac/img/product-20in.jpg"};

selectionGalleryConfig.images[2] = {full:"http://a248.e.akamai.net/7/248/2041/1164/store.apple.com/Catalog/US/Images/imac/img/product-24in.jpg"};


var selectionGallery = new Gallery(selectionGalleryConfig);
selectionGallery.index = 0;
</script>

MyFriendIsATaco
12-10-2006, 02:49 AM
yes, and then the switching function is called from this link:<a id="labels0" href="" onclick="selectionGallery.image(0); return false;" class="active">17 inch</a>the biggest thing is just needing that Gallery.js file with the Gallery class. look in that file if you want to learn exactly how its working. heres a direct link to the Gallery.js (http://a248.e.akamai.net/7/248/2041/1164/store.apple.com/rs/js/Gallery.js)

Jetjaxon5
12-10-2006, 03:15 AM
Thank you so much for your help.