|
FAQ
Frequently Asked Questions
Looking for help? Please post your questions to the Slideshow Google Group!
How can I specify a directory for the thumbnail rather then appending a 't' to the image name?For example, the full-size image is "1.jpg" and the thumbnail "thumbs/1.jpg". You would need to modify the replace option, something like: 'replace': [/^(.*)$/, 'thumbs/$1'] See Regular Expressions reference for more information. OK, but what if the images and thumbs are in two separate folders?For example, the full-size image is "slides/1.jpg" and the thumbnail "thumbs/1.jpg". You will have to use the parent folder "/" for hu, then prepend "slides/" to the image filenames: data = [ 'slides/1.jpg', 'slides/2.jpg', ... ]; Then your replace would be something like: replace = [/^slides(.*)$/, 'thumbs$1']; Is it possible to have multiple slideshows per page?Sure. You will just need to give each wrapper element it's own ID, and initialize a new instance of the class for each one: <div id="keylin" class="slideshow"><img src="keylin/1.jpg" alt="Keylin" /></div>
<div id="gustavo" class="slideshow"><img src="gustavo/1.jpg" alt="Gustavo" /></div>
<script type="text/javascript">
window.addEvent('domready', function(){
new Slideshow('keylin', ['1.jpg', '2.jpg', '3.jpg'], {height: 300, hu: 'keylin/', width: 400});
new Slideshow('gustavo', ['1.jpg', '2.jpg', '3.jpg'], {height: 300, hu: 'gustavo/', width: 400});
});
</script>New! See the example online. Why does Slideshow disappear in Internet Explorer?While my slideshow works flawlessly in Safari and Firefox, both IE6 and IE7 do not display it properly. Instead, I merely see a brief "blip" of the default image, which then disappears, never to return. The problem often is a trailing comma in the list of pictures, for example: var data = {
"img1.jpg":{caption:"Image 1"},
"img2.jpg":{caption:"Image 2"},
};In order to make it work in IE, just delete the last comma and write it like this: var data = {
"img1.jpg":{caption:"Image 1"},
"img2.jpg":{caption:"Image 2"}
};See the closing } after Image 2? No comma! Why is Slideshow so slow to load in Internet Explorer 6?My implementation of Slideshow takes about 30 seconds to load in IE6, while in every other browser (IE7, FF, Safari, etc) it loads very fast. The problem is if you are using the optional loader but the path to the loading image(s) is incorrect. In this case simply set loader: false. How can I resize the Slideshow?I am having trouble resizing the div - I don't see it anywhere in the Slideshow CSS. Since height and width are attributes of the presentation, it is best to change these values in the stylesheet: .slideshow-images {
height: 300px;
width: 400px;
}Slideshow will parse in these values on initialization and adjust the dimensions of the show accordingly. You can also do the same thing in reverse by setting the options in the Slideshow class: new Slideshow('show', data, { height: 300, hu: 'images/', width: 400 });The only difference is the show will only take those dimensions if Javascript is enabled. Note: these attributes only affect the size of the "slides" or Slideshow images (more information in the Wiki): <div class="slideshow">
<div class="slideshow-images">
<a><img /></a>
</div>
...
</div>In order to affect the dimensions of the Slideshow wrapper (that contains the controller, captions, thumbnails, etc) you will need to set the following class in the stylesheet: .slideshow {
height: 300px;
width: 400px;
}Accordingly, the size of the Slideshow images will not be affected. Why won't Slideshow work with Google Maps?I load a page with Google Maps, Mootools 1.2 and Slideshow and initiate a Slideshow and a Map on their own DIVs and Firebug reports: "A parameter or an operation is not supported by the underlying object" code: 15 /scripts/mootools_core.js Line 3162 This is a Google Maps issue. Simply loading the Maps CSS after the Javascript gives this error. Placing the CSS file before the Javascript was included fixed it. When I use PNG images with an alpha channel the previous image can be seen behind the current one?I only want to see the current image - the previous image should be gone. Initialize Slideshow with the overlap: false option. Why aren't the Slideshow animations working correctly?Either the main image isn't appearing or the captions (loader, controller, etc) are not animating as I have specified in the slideshow.css. In this case there may be a problem that Mootools is unable to access the Slideshow stylesheet. This can happen for either of two reasons:
Why does the Ken Burns Slideshow look so bad on IE / PC?Great tool but IE performance suffers a little too much for me to use it for professional work. This has been fixed for IE7 since rev 131 - get the latest version here. Unfortunately there doesn't appear to be any fix for IE6. However at the moment the Slideshow should look awesome on IE7/8, Firefox 3+, Chrome/Safari and any Mac browser! Why can I not see anything?I get the error: Asset is not defined If you are using Slideshow with a different version of Mootools than the one included with the class, be sure to also add the Assets utility. Slideshow requires the Assets utility to stream in images and will not work without it. |
Hi there,
Great work!
I'm getting a glitch when I implement the slide show into my pages.
Looks like when the image hits 100% transparency it disappears for a second, creating a nasty flash.
I'm sure it's my fault as your code alone works great, but wondering if you've ever encountered this problem before?
The problem page is here: http://www.germinatr.com/
Thanks again for the excellent work.
Matt
Hi there again,
I've tracked down the problem. It seems that the Firefox web developers tool bar is causing the problem.
:)
M
Hi there!
Great stuff!! I definitely want to use Slideshow 2 in my website. My website is based on Plone and the pictures are stored in another location on the same or another server.
What do I have to change (can you give me a hint?;-) I would like to configure a topdirectory for my images, for example: http://www.example.com/photos/show1
The html and js would be on http://www.11example11.com/show1
Thank you very much!
Philip
@ilipcito,
That's not a problem - the 'hu' option takes absolute pathnames, so just plug your imgdir in there.
@all,
If you have questions please post them to the Google Group.
How would I tell it to get the thumbnail source from the HTML. There is no way to derive the thumnail source from the image source in my environment. For example I have two images that are generated programatically for the full size and the thumb they look like...
Full Size: <img src="/seminary/slideshow/.TEMP/image010TEMP450x280-1242.jpg" width="450" height="280" border="0">
Thumbnail: <img src="/seminary/slideshow/.TEMP/image010TEMP50x40-8078.jpg" width="50" height="40" border="0">
So is there a way I can get it to use the different sources for the images
Thanks for any help.
Terry Riegel
Hie, I want to show images which exists in multiple folders but I am struct on hu: 'imagefolder/' in script, when I remove it the slideshow doesn't work. Is there any way to show images from multiple folders like If we only define the image src only not the 'hu:' so we can get images from multiple folders... folder names are dependent on database query result!
you replied to look into FAQ which I did, but I still can't figure out the solution... Could'nt we just use src of images instead of 'hu:' that can also be a solution... Please guide me as I don't know javascripting and I really like your slideshow and want to place this instead of my current slideshow...
@terry,
The data object that you pass Slideshow on initialization accepts a value for thumbnail:
{ "image010TEMP450x280-1242.jpg": { "caption": "Caption goes here", "href": "link_goes_here.html", "thumbnail": "image010TEMP50x40-8078.jpg" }, ... }All three of the values are optional, just use the ones you need to override the Slideshow defaults.
@itsmemurtaza,
You would set "hu" to the parent folder of all your different image folders, then pre-pend the various image sub-folders to the name of each image:
parent/ imagefolder1/ houses/ imagefolder2/ cars/ hu: "parent/", data: ["imagefolder1/houses/1.jpg", "imagefolder2/cars/1.jpg", ...]Anyway that is one way to do it. Alternatively you can pass the Slideshow a null obect for data, and let it parse in the images and thumbnails from the HTML.
@all,
For a faster response, please post your questions to the Google Group.
Is there a way to apply transition effects when the slideshow isn't playing - that is, when you are just clicking on the thumbnails to go from image to image?
I have to agree, great work here... Say, do you or anyone you know is working on a Wordpress plugin for this one?
Slideshow2 team - First off, excellent work on creating the slide show script. I have to say it's very impressive. With that said, I attempted to do a mash up with Lightbox and the kenburns slide show. Everything works with the slide show, but the lightbox. I've tried several different lightbox scripts. According to Aeron's Slideshow2 site, it says that it's compatible with any lightbox script using mootools 1.2. I've tried a lightbox script that uses mootools 1.2, but it didn't work. Then I tried the slimbox script that also uses mootools 1.2, again...not working. Any ideas? Using firebug, I can inspect the img element, and I can see that the rel="lightbox" attribute has been added, but when I click on the image, it just loads the image in the window as normal-but with no lightbox effect. Here's my code using lightbox.js and following the source of the mashup on Aeron's Slideshow2 site, I have all the script's loaded and css files loaded as well but I've omitted them for brevity (despite this lengthy comment):
<script type="text/javascript"> window.addEvent('domready', function(){ // Load images var data = ["1.jpg", "2.jpg", "3.jpg"]; var showBurns = new Slideshow.KenBurns("show", data, {controller: false, delay: 4000, duration: 1000, height: 300, hu: 'images/', linked: true, thumbnails: true, width: 400, zoom: 25}); showBurns.slideshow.retrieve('images').getElements('a').set('rel', 'lightbox'); var box = new Lightbox({ 'onClose': function(){ this.pause(false); }.bind(myShow), 'onOpen': function(){ this.pause(true); }.bind(myShow) }); box.image.addEvent('click', function(){ this.close(); }.bind(box)); });Using the slimbox the code is identical, but without adding the events for the lightbox.
Any ideas on what I'm doing wrong?
Hi I am using the Ken Burns effect but I would like it to be able to pause for say a couple of seconds before the transition to the next image starts. Is this possible and if so how even if I have to edit JS code.
Regards Peter
@tony.aceves
The error in your example is you are binding the Lightbox events to the variable myShow when in fact the name of your Slideshow instance is showBurns. I would recommend setting Script > Break On All Errors in Firebug to help catch bugs such as these.
@all
For a faster response, please post your questions to the Google Group.
@all
Please post your question to the Google Group in order to receive a reply. If you believe you have found a bug - usually if the Slideshow behaves in a way it logically shouldn't - please open an issue report so that it may be properly investigated and addressed.
Hello all,
I got a problem with Fold slide show. The slide show works perfect in Firefox and Safari but it give me the error and disappear in IE7. Any ideas?
Work for all slide show except the Fold style. Also, when I tested on the Demo Fold Slide show, the demo doesn't work on IE7 either.... Any solution for this?
thanks... Kristy
Why the 1st photo appears only the half so long (2 seconds) and then all is good. (www.chatorebatta.com) Thanks
@trantrant
It seems that ie7 doesn't deal with first image in sequence quick turnoround can be changing line 53 in slideshow.fold.js to: img.setStyle('visibility', 'visible').get('tween');//.set('auto');
I haven't notice any difference in FF after removing the set('auto') but it causes IE7 works
If you find out some differences maybe add this line after modified one for non IE if(!Browser.Engine.trident) img.set('auto');
Greets
This CSS solves the problem resized images look crappy in IE7 !!!
img {-ms-interpolation-mode:bicubic;}
Here's a question for everybody else STILL asking questions here...
Is this difficult to understand or are you just morons?
Comment by aeron.glemann, Oct 02, 2008 @all
Please post your question to the Google Group in order to receive a reply. If you believe you have found a bug - usually if the Slideshow behaves in a way it logically shouldn't - please open an issue report so that it may be properly investigated and addressed.