You could do this with a stack of HTML boxes all the same size, each one containing the “previous” button and the central image and the “next” button. Using JavaScript, you would cause only one of them to be visible at any one time.
Name each box something you can remember, like frame1, frame2, frame3, etc.
Use the Extended dialog to give each of these boxes the same class attribute. (Click once on the box so its “handles” appear, then choose Item / Extended from the main menu. Make sure the DIV segment is selected, then click New, and enter the following name/value pair:
- Name: class
- Value: gallery
To build this stack in the most efficient manner, follow these steps:
-
First, draw an HTML box that is large enough to hold your central image and your previous and next arrow graphics.
-
While this HTML box is still selected (handles showing) add the class attribute as above, and name the box frame1 or whatever you choose using the Inspector’s Title field (actully mis-named – it creates the id attribute).
-
With the HTML box still selected, option-click on the Graphic Box tool in the tools palette or the window header toolbar. (This locks the graphic box tool so it won’t revert after each use. You will click on another tool to unlock it later.)
-
Draw a small HTML box for your previous button, starting and ending your drag over the HTML box you previously created. This makes the graphic box a nested child of the HTML box, so you will be able to duplicate the entire collection of boxes as if it was one element.
-
Repeat this step to draw a central box for your image, and another for your next button. Now click on another tool to release the lock.
-
Import the button images and the graphic, and align everything as you like it. You should end up with one finished frame of your effect.
Before you create your second frame, set the link which will navigate to it. (This is where naming these frames rationally will really pay off.) Click on the next graphic, and open the Hyperlink dialog (Apple-K) and choose the External tab. If you’re on frame1, and you want to navigate to frame2, enter #frame2 as the URL. If you also want your links to wrap around, then do the same for your previous arrow, only set it to #frame7 or whatever your highest number is.
Now click once on the outer HTML box, and use Item / Duplicate (0,0 offsets) to create a copy of that box above the first one. This time, all you will need to change are the URLs of the buttons and the graphic in the center. Repeat until you have built up the entire stack.
Now apply the Protaculous Action to the page, and choose the prototype-packed Library. In the top Function Body editor, add the following code (this presumes that you’ve followed my naming strategy above – each of the frames has the classname ‘gallery’ and all of the frames are named frame1, frame2, etc. with anchor links to match.
var frames = $$('div.gallery');
var links = $$('div.gallery a');
frames.invoke('hide').first().show();
links.invoke('observe','click',function(evt){
evt.stop();
var t = $(this.href.split(/#/)[1]);
if(t){
frames.invoke('hide');
t.show();
}
});
That should do the job for you. If you want the effect to be more gradual, then change the library to scriptaculous-packed, and change the function to this:
var frames = $$('div.gallery');
var links = $$('div.gallery a');
frames.invoke('hide').first().show();
links.invoke('observe','click',function(evt){
evt.stop();
var t = $(this.href.split(/#/)[1]);
if(t){
frames.select(function(elm){
return elm.visible();
}).fade();
t.appear();
}
});
It’s important to realize that no matter which effect you choose here, all of these images are loaded into the browser when the page is requested, and depending on how large they are, this may result in a very large file size for your page. For certain types of pages (galleries) this is expected by your visitors, and they’ll put up with it. I would not recommend putting this on your home page, though.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options