Basilico Slideshow

BasilicoSlideshow creates an adaptive image slideshow for mobile device browser: it calculates the right dimensions according to container width, as a div tag, and browser height.

Specifications:

You can use any proportion you want! You also can use original image size, and the script will adapt the image to viewport.
It supports orientation changes and also resizing to support old safari versions.
toLeft, toRight and fadeOut effects with CSS3 transitions where supported.
You can enter text and link for any image.
No javascript framework used: so no Jquery old version or other conflict problems.
Low size: just 19kb minimized.

UX characteristics:

Supports touch event.
Vertically scrolling on the slideshow cause a vertically page scrolling.

Tested on mobile browsers:

IPhone: Safari, Opera mini, ...
Android: Dolphin, Firefox, ..

Note: the script doesn't let start effects if it detects Opera Mini, because Opera Mini stops effects for his optimizations.

JSDoc

/**
* basilicoSlideshow(aImgs, proportion, maxWidth, [,divContainer [,options])
*
* Create an image slideshow
* aImg: an array of image url - example {images: [{url:"", text:"", link: ""}, {url:"", text:""}, ...][, urlTarget: "_blank"]}
* proportion: the images proportion - examples: {x:4,y:3} , {x:16,y:9}
* maxWidth: the max width of the slideshow
* [divContainer: the id of the container, can be null]

* [options: {

cssClass:"shadow",//this is not the default value

timer:5000(in milliseconds) or 0 to disable

showImagesCounter:true (or false),

counterBgColor:"grey" or "url(img.gif)",

counterColor:"white",

loadingText: "Loading",

textBgColor: "grey" or "url(img.gif)",

textColor: "white"

textBgOpacity: 0 to 100 - default: 90

}]

*/

How To Use

Inline js

...<div>
<script type="text/javascript">
new basilicoSlideshow({images: [{url: "url1.jpg", text: "google", link:"url"}, {url: "url2.jpg"}, {url: "url3.jpg", text: "bla bla bla"}], urlTarget: "_blank"}, {x:1:y:2}, 300, null, {cssClass:"shadow"});
</script>
</div>...

DOMContentLoaded event

...
<script type="text/javascript">
addEventListener("DOMContentLoaded",
function() { new basilicoSlideshow({images: [{url: "url1.jpg", text: "google", link:"http://url"}, {url: "url2.jpg"}, {url: "url3.jpg", text: "bla bla bla"}], urlTarget: "_blank"}, {x:1:y:2}, 300, "divId", {cssClass:"shadow"});}
, false);
</script>
</head>
<body>
<div id="divId"></div>
...

Style customization

To customize the text of slideshow with CSS, your have to make a rule with the selector #BasilicoSlideshowText and set !important for each declaration, to overwrite inline rules:

#BasilicoSlideshowText a, #BasilicoSlideshowText a:visited {color: white !important}

Download

Basilico Slideshow v.1.8.6 - minimized version
Changes log

Example

Images

Slideshow textshow aspect where touch events are supported
Slideshow textshow aspettect where touch events are supported