joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart
This free copy and paste script adds a stylish CSS3 effect to your slideshow. Simply by setting the style attributes you can apply corners to any or all four image-corners, furthermore you can apply shadows. Each slide can be commented and linked. The visual CSS3 effects are supported by FF3+, Safari 4+, Google Chrome 4+, Opera 10.5+. All other browsers will display a clean zoom-in zoom-out slideshow without rounded corners.

Step 1: Open your webpage and paste the following code anywhere between
and
:
.textboxstyle {
font-family:Arial;
font-size:16pt;
color:black;
text-align:center;
vertical-align:top;
}
.textboxbackgroundstyle {
background-color:white;
padding:5px;
/* rounded corners for Firefox */
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
/* rounded corners for for Safari and Chrome */
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
/* rounded corners for Opera */
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.curveandshadowstyle {
/* shadow and rounded corners for Firefox */
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
/* shadow and rounded corners for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #818181;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
/* shadow and rounded corners for Opera */
box-shadow: 5px 5px 5px #818181;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
/* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');
border-style:solid;
border-width:1px;
border-color:white;
}
var imgurl= new Array()
var message= new Array()
var thislink= new Array()
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////
// set the url (or path) of your images. Add as many images as you like
imgurl[0]="../../pics/300x180bluefish.jpg"
imgurl[1]="../../pics/300x180bonbons.jpg"
imgurl[2]="../../pics/300x180castle.jpg"
imgurl[3]="../../pics/300x180fruitshop.jpg"
// set the messages corresponding to the images above (no more no less than the images above)
message[0]="Let's go fishing today"
message[1]="You are even sweeter"
message[2]="My castle is my home"
message[3]="Eat more vitamins"
// set the links corresponding to the images above (no more no less than the images above)
// If you dont want to add a link enter a #"instead of http://www.mylink.com, see smaple below
thislink[0]="#"
thislink[1]="#"
thislink[2]="#"
thislink[3]="#"
// width of pictures (pixel)
var imgwidth=300
// width of pictures (pixel)
var imgheight=180
// set stillstand of picture (seconds)
var stillstand=2.5
// set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////
// Do not edit below this line
var tmr
var step=10
var i=imgwidth
var i_imgurl=0
stillstand*=1000
var preloadedimages=new Array()
for (iii=0;iii<imgurl.length;iii++){
preloadedimages[iii]=new Image()
preloadedimages[iii].src=imgurl[iii]
}
function shrinkpic() {
document.getElementById("textbox").innerHTML=""
if (i>0) {
i-=step
document.getElementById("picdiv").style.width=i+"px"
document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
tmr=setTimeout("shrinkpic()",20)
}
else {
i_imgurl++
if (i_imgurl>=imgurl.length) {
i_imgurl=0
}
document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
i=1
tmr=setTimeout("enlargepic()",20)
}
}
function enlargepic() {
if (i<=imgwidth) {
i+=step
document.getElementById("picdiv").style.width=i+"px"
document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"
document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"
document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"
tmr=setTimeout("enlargepic()",20)
}
else {
i=imgwidth
showmessage()
}
}
function showmessage() {
document.getElementById("textbox").innerHTML=''+message[i_imgurl]+''
tmr=setTimeout("shrinkpic()",stillstand)
}
function gotothislink(){
document.location.href=thislink[i_imgurl]
}
document.write('')
document.write('')
document.write('<table width="+imgwidth+" height="+imgheight+"><tr><td id="textbox" class="textboxstyle">'+message[0]+'</td></tr></table>')
document.write('')
window.onload=shrinkpic
Step 2: Go inside the -tags and configure the text-style, the curve-style and the shadow-style.
Step 3: Go to the top-lines within the -tags and configure the images, the text, the link, the opacity and the size of the slideshow.
Download: http://www.htmldrive.net/items/download/1035