Jedes Bild kann verlinkt und kommentiert werden. Die Thumbnail-Galerie kann angezeigt oder ausgeblendet werden
Code: Alles auswählen
<!---------------------------------->
<!-- START OF SLIDESHOW SCRIPT -->
<!---------------------------------->
<!-- START OF STYLE CONFIGURATION -->
<style>
.commentstyle{
/* style attributes for the comments below the pictures */
font-family:Arial;
font-size:9pt;
color:brown;
vertical-align:middle;
text-align:center;
padding:5px;
}
.thumbnailstyle{
/* style attributes for the thumbnails */
margin:3px;
width:67px;
border-style:solid;
border-width:1px;
border-color:white;
/* shadow for Firefox */
-moz-box-shadow: 2px 2px 3px #AAAAAA;
/* shadow for Safari and Chrome */
-webkit-box-shadow: 2px 2px 3px #AAAAAA;
/* shadow for Opera */
box-shadow: 2px 2px 3px #AAAAAA;
/* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#AAAAAA');
}
.slideshowstyle{
/* style attributes for the slideshow-box */
/* ATTENTION: width and height must be set within the script */
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:white;
background-color:#EEEEEE;
background-image: url(tile.jpg);
margin:3px;
/* shadow for Firefox */
-moz-box-shadow: 5px 5px 8px #AAAAAA;
/* shadow for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #AAAAAA;
/* shadow for Opera */
box-shadow: 5px 5px 5px #AAAAAA;
/* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#AAAAAA');
}
</style>
<!-- END OF STYLE CONFIGURATION -->
<script>
// CREDITS:
// Slideshow with thumbnail gallery and zoom-effects
// by Peter Gehrig
// Copyright (c) 2011 Peter Gehrig. All rights reserved.
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.fabulant.com on the webpage
// where this script will be running.
var picture= [
/////////////////////////////////////////////
// START OF SCRIPT CONFIGURATION
/////////////////////////////////////////////
// Set the URLs of images, the links and comments.
// Add as many pictures a you like
// Each image requires a block, as shown below:
// {
// imgsrc : "http://www.the-url.com/of/your/image.jpg",
// linkto : "http://www.where-you-go-if-you-click-on-the big-image.com",
// comment : "the comment below the image",
// }, each block ends with a comma (exception: the very last block)
{
imgsrc : "../../pics/300x180bluefish.jpg",
linkto : "http://www.hotscripts.com",
comment : "Let's go fishing "
}, // comma required
{
imgsrc : "../../pics/300x180bonbons.jpg",
linkto : "http://www.hotscripts.com",
comment : "Not as sweet as you"
}, // comma required
{
imgsrc : "../../pics/300x180butterfly.jpg",
linkto : "http://www.hotscripts.com",
comment : "Fly away, my little butterfly"
}, // comma required
{
imgsrc : "../../pics/300x180castle.jpg",
linkto : "http://www.hotscripts.com",
comment : "My castle is my home"
}, // comma required
{
imgsrc : "../../pics/300x180fruitshop.jpg",
linkto : "http://www.hotscripts.com",
comment : "Are fruits really healthy for you? "
}, // comma required
{
imgsrc : "../../pics/300x180herbstwald.jpg",
linkto : "http://www.hotscripts.com",
comment : "Did you see Robin Hood behind the trees?"
}, // comma required
{
imgsrc : "../../pics/300x180lemons.jpg",
linkto : "http://www.hotscripts.com",
comment : "I like lemons"
}, // comma required
{
imgsrc : "../../pics/300x180tree.jpg",
linkto : "http://www.hotscripts.com",
comment : "The truth about trees "
} // ATTENTION: the last entry requires NO final comma
]
// pause (seconds)
var stillstand=2
// speed of zooming. Higher value means faster zooming
var zoomspeed=20
// width of slideshow (px). Width of slideshow and width of images should be identical
var slideshowwidth=300
// height of slideshow (px). Height of slideshow and height of images should be identical
var slideshowheight=180
// Shall thumbnails be displayed? Enter "yes" or "no"
var show_thumbnails="yes"
/////////////////////////////////////////////
// END OF SCRIPT CONFIGURATION
/////////////////////////////////////////////
// Do not edit below this line
var imgpreload=new Array()
for (iii=0;iii<=picture.length-1;iii++) {
imgpreload[iii]=new Image()
imgpreload[iii].src=picture[iii].imgsrc
}
var positionleft=0
var positiontop=0
var timer
var marginright=0
var i_fadestrength=0
var i_images=0
var step=1
var content_image
var content_text
var imageboxwidth=0
var imageboxheight=0
var imagebasicwidth=0
var imagebasicheight=0
var moveon=true
var timer
var timerpause
var stopid
stillstand*=1000
function setimage() {
if (i_images>=picture.length) {i_images=0}
content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"'></a>"
content_text=picture[i_images].comment
document.getElementById('imagebox').innerHTML=content_image
document.getElementById('textbox').innerHTML=content_text
imagebasicwidth=document.newpic.width
imagebasicheight=document.newpic.height
if (show_thumbnails=="yes"){
if (document.all) {
for (i=0;i<=picture.length-1;i++) {
document.getElementById(i).filters.alpha.opacity=30
}
}
else {
for (i=0;i<=picture.length-1;i++) {
document.getElementById(i).style.opacity=0.3
}
}
}
timer=setTimeout("startenlarge()",50)
}
function startenlarge() {
if (moveon) {
if (imageboxwidth<imagebasicwidth) {
content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
document.getElementById('imagebox').innerHTML=content_image
imageboxwidth=document.newpic.width
imageboxheight=document.newpic.height
if (document.all) {
document.getElementById('imagebox').filters.alpha.opacity=Math.floor(i_fadestrength)
document.getElementById('textbox').filters.alpha.opacity=Math.floor(i_fadestrength)
if (show_thumbnails=="yes"){
document.getElementById(i_images).filters.alpha.opacity=Math.floor(i_fadestrength)
}
}
else {
document.getElementById('imagebox').style.opacity=(i_fadestrength)/100
document.getElementById('textbox').style.opacity=(i_fadestrength)/100
if (show_thumbnails=="yes"){
document.getElementById(i_images).style.opacity=(i_fadestrength)/100
}
}
document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
document.getElementById('imagebox').style.overflowX="hidden"
document.getElementById('imagebox').style.visibility="visible"
step+=0.5
i_fadestrength+=(100/(slideshowwidth/zoomspeed))
imageboxwidth+=zoomspeed
timer=setTimeout("startenlarge()",50)
}
else {
clearTimeout(timer)
pauseimage()
}
}
else {
clearTimeout(timer)
stopanimation()
}
}
function pauseimage() {
if (moveon) {
content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
document.getElementById('imagebox').style.left=0+"px"
document.getElementById('imagebox').style.top=0+"px"
document.getElementById('imagebox').innerHTML=content_image
if (document.all) {
document.getElementById('imagebox').filters.alpha.opacity=100
document.getElementById('textbox').filters.alpha.opacity=100
if (show_thumbnails=="yes"){
document.getElementById(i_images).filters.alpha.opacity=100
}
}
else {
document.getElementById('imagebox').style.opacity=1
document.getElementById('textbox').style.opacity=1
if (show_thumbnails=="yes"){
document.getElementById(i_images).style.opacity=1
}
}
i_fadestrength=0
timer=setTimeout("finishenlarge()",stillstand)
}
else {
clearTimeout(timer)
stopanimation()
}
}
function finishenlarge() {
if (moveon) {
if (i_fadestrength<=100) {
content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
document.getElementById('imagebox').innerHTML=content_image
imageboxwidth=document.newpic.width
imageboxheight=document.newpic.height
if (document.all) {
document.getElementById('imagebox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
document.getElementById('textbox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
}
else {
document.getElementById('imagebox').style.opacity=(100-i_fadestrength)/100
document.getElementById('textbox').style.opacity=(100-i_fadestrength)/100
}
document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
document.getElementById('imagebox').style.overflow="hidden"
document.getElementById('imagebox').style.visibility="visible"
i_fadestrength+=5
imageboxwidth+=zoomspeed
timer=setTimeout("finishenlarge()",20)
}
else {
clearTimeout(timer)
i_fadestrength=0;
step=1;
i_images++
if (i_images>=picture.length) {i_images=0}
imageboxwidth=0
timer=setTimeout("setimage()",50)
}
}
else {
clearTimeout(timer)
stopanimation()
}
}
function onmsover(thisimg) {
stopid=thisimg.id
if (show_thumbnails=="yes"){
if (document.all) {
for (i=0;i<=picture.length-1;i++) {
document.getElementById(i).filters.alpha.opacity=30
}
document.getElementById(stopid).filters.alpha.opacity=100
}
else {
for (i=0;i<=picture.length-1;i++) {
document.getElementById(i).style.opacity=0.3
}
document.getElementById(stopid).style.opacity=1
}
}
moveon=false
}
function onmsout(thisimg) {
moveon=true
i_images=thisimg.id
clearTimeout(timer)
setimage()
}
function stopanimation() {
content_image="<a href='"+picture[stopid].linkto+"'><img border=0 name='newpic' src='"+picture[stopid].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
document.getElementById('imagebox').style.left=0+"px"
document.getElementById('imagebox').style.top=0+"px"
document.getElementById('imagebox').innerHTML=content_image
content_text=picture[stopid].comment
document.getElementById('textbox').innerHTML=content_text
if (document.all) {
document.getElementById('imagebox').filters.alpha.opacity=100
document.getElementById('textbox').filters.alpha.opacity=100
}
else {
document.getElementById('imagebox').style.opacity=1
document.getElementById('textbox').style.opacity=1
}
i_fadestrength=0
}
if (show_thumbnails=="yes") {
document.write("<DIV id='roofthumbnails' style='position:relative;width:"+slideshowwidth+"px;'>")
for (i=0;i<=picture.length-1;i++) {
document.write("<img class='thumbnailstyle' onmouseover='onmsover(this)' onmouseout='onmsout(this)' id='"+i+"' style='filter:alpha(opacity=50') src='"+picture[i].imgsrc+"'>")
}
document.write("</DIV>")
}
document.write("<DIV id='roofimages' class='slideshowstyle' style='position:relative;width:"+slideshowwidth+"px;height:"+slideshowheight+"px;overflow:hidden'>")
if (document.all) {
document.write("<DIV id='imagebox' style='position:absolute;left:0px;top:0px;filter:alpha(opacity=0);'></DIV>")
}
else {
document.write("<DIV id='imagebox' style='position:absolute;opacity:1;'></DIV>")
}
document.write("</DIV>")
document.write("<DIV style='position:relative;width:"+slideshowwidth+"px;'>")
document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")
document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")
document.write("</DIV>")
onload=setimage
</script>
<!---------------------------------->
<!-- END OF SLIDESHOW SCRIPT -->
<!---------------------------------->
Hier die Demoseite: Thumbnail-Gallery