I have a site I recently put up for a client [http://tabouligrill.com/]. She wanted me to make the large image in the upper right into a slideshow of various images – right now it is set up to change as you rollover the navigation names on the left.
I have used mootools accordion and slimbox for the navigation items. If I try to make the large photo box into a Fading Slideshow, using the Fading slideshow action, I end up with about a 1/4 inch gap between the top of the picture box and the top green bar. The page uses the box model setup so the initial image was placed into a graphics box inside the right column (which is set with a Float of right and Clear of none – the image is aligned Baseline). I have sized all the images I wanted to use to the same dimensions in Photoshop. And I have played with the image alignment, but the image box still drops down from the top bar.
I have not posted anything with the Fading Slideshow, but could do so in a test folder if that helps.
I posted a sample of what’s happening in a test folder – add testsite2 after the tabouligrill.com/
I did try top for the alignment of the image box and it made no difference. This version has ‘No Float’ set in the Fading Slideshow Action. If I change the Fading Slideshow Action setting to Float Left or Right, the image box doesn’t have the gap as this one does. However, the phone number and sprig that is under the image box, then moves on top of the image close to the top green bar.
(Note that the sprig and phone number were created as a grouped html and graphic and then inserted into the right column – it was the only way I could figure out how to have the phone number sit above the sprig. It also has Fade Action applied to it (tried turning that off but it doesn’t help) – is the problem related to this graphic? I notice that the graphic box and phone number box do not give me a choice of any kind of alignment or float.
I think your box model setup is misconstructed. You have a mix between absolute and relative positioned items while typically a box model has all relative items. Relative items occur during a box in a box structure while absolute positioning is more drag and drop regardless if there is a box or not.
To fix your site, I think, would require a rebuild of that one column.
So you’d have the column labelled “Column-Right” and then inside of that you’d need to insert 4 html items into it.
Then you’d set all the float’s to be ‘none’ and the clear’s to ‘both’ for all 4 items.
Then you’d want to insert a graphic item into the first box and scale it out to match the size of the graphic images you’re using for the slideshow.
Then you’d repeat the process to put the fading slideshow action onto that just inserted graphic item.
Then from there the next box would contain just the phone number and the address. You’re going to want to set that ‘branch’ or ‘leaf’ as the HTML item’s background image and rather then giving the HTML item an undefined height. You’d give it a defined height to always show the full background image of that specific HTML item.
Then in the third box you’d enter the green text you have there already.
Then in the fourth box you’d insert two graphic items and then import the graphics you use there plus set the float’s to be ‘baseline’. Never set a single image to float left unless it sits inside of text or something where it absolutely must float left. I always typically leave images as baseline as the default. By setting a float to left you increase the chances of things not sitting properly.
Try those things and if it doesn’t work I’ll rebuild the column for you in a sample file and see if I can get it working.
I won’t be able to get to it right away but will try what you suggest.
Also, just a couple clarifications to some of your steps if you don’t mind. In step 3 I insert my image into box 1. For step 4, you just mean turn on the action for this box and use Fading Slideshow to link to my other images (not repeating step 3), correct?
For the phone number box, can I use margins or padding to better position the number over the leaf, or will this cause problems with IE 6/7
And for my last box, you say to insert two graphic items and then import the graphics --am I creating two graphics boxes inside box 4 then importing the logos or just importing the logos?
You’d insert a graphic item into box 1 because the action relies on a graphic item to be there to apply the action to. You’d then, as a suggestion, import an image that is to be used in the slideshow so you can visually see how things line up. You’d also want to go to ‘Item’ and choose ‘Fit Box To Content’ for the graphic item so it removes any additional space around the graphic (assuming these images are pre-cropped). After you had that set up and imported you could go to ‘Edit’ (I believe) and choose ‘Delete Content’ and then it’d remove your recently imported image but it wouldn’t change the dimensions of the graphic item.
For Step 4, correct, you’d apply the action to the graphic item and then select your folder or your individual images and then adjust your settings and what not. This would not require you to repeat step 3.
You’d want to use ‘padding’ for the ‘phone number box’ as that HTML item will have the leaf background and since padding works on the ‘inside’ you’d want to use that instead of margin which works the ‘outside’ of the box.
You’d insert two graphic items into the last HTML item box and then import the facebook graphic in one box and the other graphic in the other. You should be able to set the align to ‘baseline’ for both. If not you could set them to float ‘left’ and then apply a margin underneath it to increase the distance between the graphic items and the footer below it.
I posted up a revised site with the fading slideshow (using your specs) and everything seems to be working properly (at least on the browsers I have on my mac – Safari, Firefox and Chrome.) Hopefully I did everything correctly.
Since I had used a fade previously on the sprig under the picture I had to play with it a bit in Illustrator and Photoshop to get it right). I set it to tile-center for both background settings. One question I still have, since the sprig is a background image, if I wanted a bit more room between it and the image, how would I go about that. Padding only moves the phone number down and when I tried adding bottom padding to the image above, nothing seemed to happen.
You’d probably want to set your background image to not tile but be ‘center’ for both ‘horizontal’ and ‘vertical’. That way it’d always sit in the center of the HTML item and you could play with the height of the HTML item. Worst case scenerio is that you’ll have to shrink the dimensions of the sprig so it looks right in the space or even set the vertical alignment to ‘top’ (leaving horizontal set to center) to play with the height.
Also, you could cheat a bit and use a CSS Property of ‘background-position’ and you can enter that into the ‘Extended’ button in your CSS palette. You’d create a new TAG style called ‘#Phone’ and then work from there. It’s more difficult this way because you might have to nickel and dime the space to get it right.
I am a Freeway Pro 5 newbie and I am interested in the various ways of creating slideshows in FW, and so I found this thread. I have to say that that tabouligrill.com site that you designed is gorgeous… very inspiring!
I used Fading Slideshow which is Freeway Action. It’s pretty straightforward, you apply the action to a picture box and you can it link to one or up to 25 pictures (if you put them all in one folder you only need to create one link. I think there is a tutorial as well if you search.
You can modify the timing of the slides, add links, etc.
Another good and more sophisticated slideshow action if Slideshow Pro. If you visit their website (http://slideshowpro.net/) you can see various ways how it works. Some versions require Flash, but you could create them without I believe.
There are others as well which you can find by searching in this forum
Also for clarification there isn’t a ‘slideshow action’ for SlideShowPro. SSP is simply a flash SWF file, with a few other required files, that get imported into Freeway.
Dans the expert with this, but I used SlideshowPro Director (makes it much easier to manage your files) and SlideshowPro Flash with a site I did previously (westchesterstriders.org).
It kind of depends on whether you have Flash. There is also a version that works with Lightroom.
@Rebbi - With Freeway, if you don’t own Adobe Flash or Adobe Lightroom, then you’d need to use the standalone version.
Here’s a site that will help you design the slideshow and then be able to export out the design (param.xml) that you can use in the standalone version.