PictureSlides 1.0
How do I use it in a web page?
Include JavaScript files
Start by including the latest version of DOMAssistant (Complete or Compressed version) or jQuery (Minified version suggested):
<script type="text/javascript" src="js/DOMAssistantComplete.js"></script>
For jQuery:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
Then, include the PictureSlides file and the PictureSlides-settings file:
<script type="text/javascript" src="js/PictureSlides.js"></script>
<script type="text/javascript" src="js/PictureSlides-settings.js"></script>
For jQuery:
<script type="text/javascript" src="js/PictureSlides-jquery.js"></script>
<script type="text/javascript" src="js/PictureSlides-settings-jquery.js"></script>
Then, open up the PictureSlides-settings.js
file. In here, you can customize how PictureSlides should work and how it should be presented.
Create an HTML page
Create a web page where you put all the HTML that you want to be visible. Then point out the id
of the elements you want to use in the PictureSlides-settings.js
file.
Setting the large images
The large images to used can either be linked in regular links within the element specified with the thumbnailContainerId
. Like this:
<a href="pictures/blossoming-tree.jpg" title="Blossoming tree">
<img src="thumbnails/blossoming-tree.jpg" alt="Blossoming tree">
</a>
An alternative, if you don't use thumbnails in your page, is to link directly to them in the PictureSlides-settings.js
file. For example:
images : [
["images/picture1.jpg", "Text describing that picture"],
["images/picture2.jpg", "More descriptive text"]
// Important! No comma after the last one.
]
If you want to dynamically generate the image information on the server through ASP.NET or PHP, you just need to create an array like this (after the JavaScript file has been included):
// In a JavaScript file
DOMAssistant.PictureSlides.images : [
["1.jpg", "Bat bridge in Austin"],
["2.jpg", "Blossoming tree"],
["3.jpg", "Bat bridge from below"],
["4.jpg", "Birds", "Birds"]
// Important! No comma after the last one.
]
// In a JavaScript block
DOMAssistant.PictureSlides.images = [
["1.jpg", "Bat bridge in Austin"],
["2.jpg", "Blossoming tree"],
["3.jpg", "Bat bridge from below"],
["4.jpg", "Birds"]
// Important! No comma after the last one.
];
For jQuery:
// In a JavaScript file
jQuery.PictureSlides.images : [
["1.jpg", "Bat bridge in Austin"],
["2.jpg", "Blossoming tree"],
["3.jpg", "Bat bridge from below"],
["4.jpg", "Birds", "Birds"]
// Important! No comma after the last one.
]
// In a JavaScript block
jQuery.PictureSlides.images = [
["1.jpg", "Bat bridge in Austin"],
["2.jpg", "Blossoming tree"],
["3.jpg", "Bat bridge from below"],
["4.jpg", "Birds"]
// Important! No comma after the last one.
];
Settings and parameters
useImageText : true
- Whether to use a text to accompany the selected image. Automatically taken from the
title
attribute of the thumbnail image link, or the second value for each image inimages
in thePictureSlides-settings.js file
. useImageCounter : true
- If a counter should be shown, displaying the current image number and the total image count. E.g. 10 / 15.
useNavigationLinks : true
- If previous, next, start and stop slideshow links should be shown.
useKeyboardShortcuts : true
- Wheter to use keyboard shortcuts to select image and start/stop a slideshow. Arrow left for previous image, arrow right for next image and space bar starts/stops the slideshow.
useThumbnails : true
- If thumbnails should be used.
useFadingIn : true
- If fading in should be used.
useFadingOut : true
- If fading out should be used.
useFadeWhenNotSlideshow : true
- If fading should be used when changing image and it is not during a slideshow.
useFadeForSlideshow : true
- If fading should be used during a slideshow.
useDimBackgroundForSlideshow : true
- If the background document should be dimmed out during a slideshow.
loopSlideshow : true
- If the slideshow should loop and start all over.
usePreloading : true
- If the large images should be preloaded, to get a smoother user experience. Lots of large images and using preloading will result in a larger server load.
startIndex : 0
- What image to start with. = is the first image, and so on.
startSlideshowAtLoad : false
- If the slideshow should start playing automatically as soon as the page has loaded.
dimBackgroundAtLoad : false
- If the background should be dimmed out as soon as the page has loaded.
images : [
["images/picture1.jpg", "Text describing that picture"],
["images/picture2.jpg", "More descriptive text"]
]- Automatically set from the thumbnail links. If no thumbnail links are present, specify large images to use here.
thumbnailActivationEvent : "click"
- What event on a thumbnail should change the large image to that one. E.g. "click", "mouseover".
mainImageId : "picture-slides-image"
- The
id
of the HTML element which is the main image element. fadeContainerId : "picture-slides-container"
- The
id
of the HTML element containing the main image and text, and will fade in/out if enabled. imageTextContainerId : "picture-slides-image-text"
- The
id
of the HTML element containing the image text. previousLinkId : "previous-image"
- The
id
of the HTML element which is the previous image link. nextLinkId : "next-image"
- The
id
of the HTML element whcih is the next image link. imageCounterId : "image-counter"
- The
id
of the HTML element showing the image counter. startSlideShowId : "start-slideshow"
- The
id
of the HTML element which is the link to start the slideshow. stopSlideShowId : "stop-slideshow"
- The
id
of the HTML element which is the link to stop the slideshow. thumbnailContainerId: "picture-slides-thumbnails"
- The
id
of the HTML element containing all the thumbnail links and images. dimBackgroundOverlayId : "picture-slides-dim-overlay"
- The
id
of the HTML element which will be used to dim the background. elementOnTopOfDimBackgroundId : "picture-slides-frame"
- The
id
of the HTML element that won't be dimmed out. fadeIncrement : 0.1
- Amount for each step to increase/decrease the current fade level. Goes from 0 to 1, and vice versa.
fadeInterval : 50
- Time between each fadeIncrement is triggered. Set in milliseconds, e.g. 1000 = 1 second.
timeForSlideInSlideshow : 2000
- How long each slide is shown in a slideshow. Set in milliseconds, e.g. 1000 = 1 second.
Thumbnail class names applied in the script
In general no class names are applied, except for the chosen thumbnail's parent link, which will get the class: "selected".