1.The main question is not how to build a slide show but how to lay it out so when Javascript is turned off all the slides are laid out in a stack in sequential order on the page?
NOTE: To see it in action turn your javascript off
Simply, by hiding the extra elements of the slideshow using
JavaScript. That way, when it’s not there, the extra images are not
hidden.
Try this on a page to get a feel for how it might work:
Draw a large HTML box on the page (note its name in the Title field
in the Inspector).
Double-click into it, and add 4 inline photos. Click once on the
outer HTML box, and un-check the height property in the Inspector, so
it will shrink to fit its contents.
Apply Protaculous to the page, and choose prototype-packed from the
library menu.
Click on the top Function Body button and paste in the following
code (changing the placeholder name for the name you memorized in step
Look at that page with JS off, then on. What’s happening here is that
any images inside that HTML box are being hidden, then the first image
is shown again. This all happens before the page even has a chance to
finish loading, so all you see (in a scripted browser) is the first
image.
Walter
On Jun 1, 2011, at 12:49 AM, TeamSDA wrote:
Does anyone know how apple is achieving this slideshow with
navigation and fallback for those browsers that have javascript
disabled.
1.The main question is not how to build a slide show but how to lay
it out so when Javascript is turned off all the slides are laid out
in a stack in sequential order on the page?
NOTE: To see it in action turn your javascript off
Gave it a try and sure enough it works as you say, very cool. Now to make the slide show work. I tried applying Target Show/Hide Image or layer along with Sequence Timer. Does not appear that these actions work with this type of set up.
Is there another way to bring the slide show functionality to either a layer or image?
Any other thoughts as to how to create this type of slideshow ad with a no javascript fallback? To make things even more interesting the slideshow ad would need to be able to cause the overall page to grow when it unpacks in in the no javascript mode.
To make the page unpack, all you have to do is use an inline layout.
Make the HTML box that contains the images of undefined height, and
make sure that it pushes everything below it downscreen, and you are
set.
To make the animation happen, you just need a little lump of
JavaScript. I’m making this up off the top of my head, but what about
this:
$$('#yourHtmlBoxName img').invoke('setStyle','position:absolute; top:
0; left:0;');
$('yourHtmlBoxName').observe('click',function(evt){
var elm = evt.findElement('img');
if(elm.nextSibling()){
var next = elm.nextSibling();
}else{
var next = elm.up('div').down('img');
}
new Effect.Parallel([
new Effect.Fade(elm),
new Effect.Appear(next)
], duration: 0.5});
});
So each time you click, you get the next image until you reach around
to the beginning again.
Walter
On Jun 3, 2011, at 4:43 PM, TeamSDA wrote:
Any other thoughts as to how to create this type of slideshow ad
with a no javascript fallback? To make things even more interesting
the slideshow ad would need to be able to cause the overall page to
grow when it unpacks in in the no javascript mode.
I just had occasion to try this out, and found a couple of bug-ettes. Please try the following, which is working in Firefox now.
$$('#yourHtmlBoxName img').invoke('setStyle',
'position:absolute; top: 0; left:0; cursor:pointer; display:none;').first().show();
$('yourHtmlBoxName').observe('click',function(evt){
var next, elm = evt.findElement('img');
if(elm.next('img')){
next = elm.next('img');
}else{
next = elm.up('div').select('img').first();
}
new Effect.Parallel([
new Effect.Fade(elm),
new Effect.Appear(next)
], {duration: 0.5});
});
You should draw an HTML box on the page, double-click inside it, and add your photos as inline children. Make note of the name Freeway (or you) give the HTML box. Then apply Protaculous to the page, click on the top Function Body button, and paste in the second version of the code above. Change the word yourHtmlBoxName to match the actual name of the box. Be sure to remOve the height attribute on the HTML box. Now preview, and see what happens.
You could change the element that the click is registered on, but you
would have to add some more housekeeping to the function in order to
track which image was “it” at the moment. Right now, it takes
advantage of the fact that the click will only land on the visible
image, since all the others are removed from the DOM.
I’ll see if I can wrap my head around it later.
Walter
On Jun 20, 2011, at 10:46 PM, TeamSDA wrote:
Wow… this is pretty cool, no this is vary cool and totally PE.
Any idea how to make it run automatically and would there be a way
to add buttons instead of clicking on the image?
Sorry for the PE abbreviation… “Progressive Enhancement” and I look forward to what you come up with. You have a great way of technically solving real world needs through clean code solutions.