Hi, I’m trying to add an html item background slideshow. The demo site is here: http://www.minimoko.com/aandt/
The image is set through the background of the item and I want to have a slideshow in its place. I have tried with the “moo:Slideshow Gallery” action but it replaces all content on the page and just shows the slideshow.
Has anybody done anything similar?
Thanks,
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you have all of the images sized correctly to be the background of the HTML box, you could do this pretty simply with the Protaculous Action. I’m not aware of any pre-built Action for this purpose, but it sounds like a cool idea.
Apply Protaculous (download from ActionsForge if you don’t have it already) to the page. Apply the Upload Stuff or Extra Resources Action to the page, and use it to upload all of your background images to the same location. I would put them in the Resources folder. Make note of their precise filenames (case matters). For this example, I’m pretending these are image1.jpeg, image2.jpeg and image3.jpeg.
Click once on your HTML box and note the precise name of it that appears in the Inspector. (Again, case matters, and I’m using item4 for my example.)
In the Page / HTML Markup dialog, set the CSS to place your first background image (use the Before /HEAD section):
<style type="text/css">
#item4 {
background-image: url(Resources/image1.jpeg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
Now click on the bottom Function Body button in the Protaculous Action interface (make sure the page is selected, and make sure the Actions palette is visible, and this will be obvious.
In the dialog box that button opens, enter the following code (adjust for your filenames and HTML box name):
var bgs = $w('image1.jpeg image2.jpeg image3.jpeg');
var idx = 0;
var t;
var changebg = function(){
if(idx == bgs.length) idx = 0;
$('item4').setStyle('background-image: url(Resources/' + bgs[idx]) + ')');
idx ++;
t = window.setTimeout(changebg, 8000) // 8 second interval
}
changebg();
Preview in a browser and see if it does the trick for you. If not, let me know and I’ll take another look at it.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walter. I’ll try this tomorrow and let you know how it goes.
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter,
I tried it after all tonight and it didn’t work. I have put back the background through the items options as I need to have the demo up, but kept all the changes so you can have a look.
Thanks for the help,
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Very minor typo, one extra close parenthesis did us in!
$('item4').setStyle('background-image: url(Resources/' + bgs[idx]) + ')');
should be
$('item4').setStyle('background-image: url(Resources/' + bgs[idx] + ')');
And then it works famously.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hmmm, sorry Walter tried it and it didn’t work. I just get a white background for the item. The same happens if I set the background only from css at the top and not from the item.
Maybe I’m missing something else?
Thanks,
Harry
PS. I’ve changed back to the previous version with the extra parenthesis as I need to show it to my client this morning.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The fact that you got a white background is actually encouraging. This means that the JavaScript is actually working correctly. The extra parenthesis is creating a JavaScript error which stops the script from running.
Now as to why it’s not working in terms of showing the backgrounds…
Very likely, the images are not at the same path that you think they are. It would be helpful if you posted a page that had each of the images on it, so we could see the path to those files.
Remember also that you have to modify this line of the script:
var bgs = $w('image1.jpeg image2.jpeg image3.jpeg');
to match the actual filenames of your images. Inside the single quotes is a list of all the images you wish to rotate, each separated from the previous by a single space.
If you have that part right, then perhaps the images are not in the Resources folder, or not in a Resources folder at the same offset from the page as on my example. This is where it would be ideal to make a test page with all three images on it, because then we would know exactly where Freeway stashed these.
I am assuming you have the following strucure:
your_web_root
index.html
Resources/
image1.jpeg
image2.jpeg
image3.jpeg
It’s possible you are pulling these images from a different Resources folder, or maybe you have set your site to publish without one (all HTML and resources intermingled). In any case, the images are not where your script is looking for them.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Well it certainly works for me Walter - http://www.deltadzine.net/bgss.html
I know you didn’t specify a library to use so I just left it at the default - Prototype
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter,
I had replied but for some reason it wasn’t posted…
It worked in the end! As always my mistake was in the smallest detail. Extension was jpg and not jpeg 
Thanks for all the help,
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Glad to help, and thanks for letting us know how it ended up!
Walter
On Jun 8, 2010, at 3:40 PM, Harry Mylonadis wrote:
Hi Walter,
I had replied but for some reason it wasn’t posted…It worked in the end! As always my mistake was in the smallest
detail. Extension was jpg and not jpegThanks for all the help,
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here I am again with another question
Is it possible to add a fade out/in effect to this slideshow?
Thanks,
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Not if you want to keep it as a background image. Only a very few browsers support multiple backgrounds, and I don’t believe there’s a way to set opacity on a background image. In order to fade between images, you usually stack them one above the other, then fade out the top image. This does a perfect “cross-fade” between them. But there’s no way I know of to get two backgrounds to behave this way.
Softpress has a Fading Slideshow Action that will do this effect with foreground images, it’s pretty simple to set up and use, too.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That’s what I thought… I will have a go at it later and see how it goes. Will post the end results here.
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Will post the end results here.
Harry, remember to start a new thread for a new Topic and you will get a better response to your questions.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for the suggestion Walter, I did it with Fading Slideshow in the end.
Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Excellent! Just watch your overall page size with that, I don’t
believe it fetches the other images on demand, just hides them until
they need to show. This can make the page take a really long time to
initially load.
Walter
On Jun 9, 2010, at 3:49 PM, Harry Mylonadis wrote:
Thanks for the suggestion Walter, I did it with Fading Slideshow in
the end.Harry
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options