Code: Alles auswählen
<!-- BEGINNING OF PART 1 OF THE IMAGE GALLERY CODE -->
<!----------------------------------------->
<!-- STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<style>
/* set the style for the thumbnail images */
.thumbnailstyle {
border: 1px solid white;
/* opacity for Firefox, Opera, Chrome, value may range from 0 to 1 */
opacity:0.5;
/* opacity for Internet Explorer, value may range from 0 to 100 */
filter:alpha(opacity=50);
}
/* set the style for the box containig the big image and the text (messages) */
/* the background-color for the text (messages) must be set here */
.boxstyle {
text-align:center;
/* shadow for Firefox */
-moz-box-shadow: 5px 5px 5px #CCCCCC;
/* shadow for Chrome and Safari */
-webkit-box-shadow: 5px 5px 5px #CCCCCC;
/* shadow for Opera */
box-shadow: 5px 5px 5px #CCCCCC;
/* background-color for the text (messages) */
background-color:#666666;
border: 1px solid white;
}
/* set the font-style for the text (messages) */
a.textstyle {
font-family:Arial;
font-size:10pt;
color:white;
text-decoration:none;
}
/* set the rollover effect for the big image */
a.textstyle:hover {
/* change of color on mouseover */
color:yellow;
}
</style>
<!----------------------------------------->
<!-- STYLE-CONFIGURATION ENDS HERE -->
<!----------------------------------------->
<script>
// CREDITS:
// Joy of JavaScript: image gallery with floating thumbnails
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////
// Set the URLs of the big images, the corresponding messages and links.
// Add as many pictures a you like.
// IMPORTANT: study carefully where commas are required
var bigimg= [
{
src : "../../pics/300x180bluefish.jpg",
message : "Did you catch a shark?",
url : "http://www.fabulant.com"
},
{
src : "../../pics/300x180castle.jpg",
message : "This caste shall be our next home",
url : "http://www.fabulant.com"
},
{
src : "../../pics/300x180butterfly.jpg",
message : "It's sprongtime",
url : "http://www.fabulant.com"
},
{
src : "../../pics/300x180bonbons.jpg",
message : "You are even sweeter",
url : "http://www.fabulant.com"
}
]
// Set the width of the big images (pixels). All images should have the same width
var bigimgwidth=300
// Set th height of the big images (pixels). All images should have the same height
var bigimgheight=180
// Set the shrink-factor of thumbnails
// In this sample the thumbnails are 6 times smaller than the big image
var shrinkfactor=6
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
/////////////////////////////////////////////////
document.write("<div id='bigpic' style='position:relative;width:"+bigimgwidth+"px;filter:alpha(opacity=100);' class='boxstyle'><img src='"+bigimg[0].src+"' border='0'><br><a href='"+bigimg[0].url+"' class='textstyle'>"+bigimg[0].message+"</a></div>")
</script>
<!-- END OF PART 1 OF THE IMAGE GALLERY CODE -->
<!-- BEGINNING OF PART 2 OF THE IMAGE GALLERY CODE -->
<script>
/////////////////////////////////////////////////
// THIS PART OF SCRIPT REQUIRES NO CONFIGURATION
/////////////////////////////////////////////////
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var floatingspeed=5
var tempo=20
var numberofimages=bigimg.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
stepx[i]=randommaker(floatingspeed)
stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
imgwidth[i]=100
imgheight[i]=100
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var blockmouseover=false
var fadetimer
var fadestrength=100
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
var spancontent=new Array()
var imgpreload=new Array()
var imgpreload=new Array()
for (iii=0;iii<=bigimg.length-1;iii++) {
imgpreload[iii]=new Image()
imgpreload[iii].src=bigimg[iii].src
}
for (i=0;i<=numberofimages;i++) {
spancontent[i]="<a href='#' onMouseOver='showpic("+i+")'><img src='"+bigimg[i].src+"' border='0' width='"+parseInt(bigimgwidth/shrinkfactor)+"' height='"+parseInt(bigimgheight/shrinkfactor)+"'></a>"
}
function setValues() {
marginbottom=window.innerHeight-11
marginright=window.innerWidth-11
if (ie) {
marginbottom=document.body.clientHeight-5
marginright=document.body.clientWidth-5
}
for (i=0;i<=numberofimages;i++) {
var thisspan=document.getElementById('span'+i)
thisspan.innerHTML=spancontent[i]
var thisspan=document.getElementById('span'+i)
imgwidth[i]=parseInt(bigimgwidth/shrinkfactor)
imgheight[i]=parseInt(bigimgheight/shrinkfactor)
var maxleftstart=marginright-imgwidth[i]
var maxtopstart=marginbottom-imgheight[i]
var thisspan=document.getElementById('span'+i).style
thisspan.left=parseInt(thisspan.left)+randommaker(maxleftstart)+"px"
thisspan.top=parseInt(thisspan.top)+randommaker(maxtopstart)+"px"
thisspan.visibility="visible"
}
checkmovement()
}
function randommaker(range) {
rand=Math.floor(range*Math.random())
if (rand==0) {rand=Math.ceil(range/2)}
return rand
}
function checkmovement() {
checkposition()
movepictures()
timer=setTimeout("checkmovement()",tempo)
}
function movepictures() {
for (i=0;i<=numberofimages;i++) {
var thisspan=document.getElementById('span'+i).style
thisspan.left=parseInt(thisspan.left)+stepx[i]+"px"
thisspan.top=parseInt(thisspan.top)+stepy[i]+"px"
}
}
function checkposition() {
for (i=0;i<=numberofimages;i++) {
imgwidth[i]=2*parseInt(document.getElementById('span'+i).offsetWidth)
imgheight[i]=2*parseInt(document.getElementById('span'+i).offsetHeight)
var thisspan=document.getElementById('span'+i).style
var leftx=parseInt(thisspan.left)
var topy=parseInt(thisspan.top)
if (leftx>marginright-imgwidth[i]-floatingspeed) {
thisspan.left=leftx-Math.abs(stepx[i]+1)+"px"
stepx[i]=randommaker(floatingspeed)*-1
}
if (leftx<marginleft) {
thisspan.left=leftx+Math.abs(stepx[i])+"px"
stepx[i]=randommaker(floatingspeed)
}
if (topy>marginbottom-imgheight[i]-floatingspeed) {
thisspan.top=topy-Math.abs(stepy[i])+"px"
stepy[i]=randommaker(floatingspeed)*-1
}
if (topy<margintop) {
thisspan.top=topy+Math.abs(stepy[i])+"px"
stepy[i]=randommaker(floatingspeed)
}
}
}
function showpic(picid) {
if (blockmouseover==false) {
document.getElementById('bigpic').innerHTML="<img src='"+bigimg[picid].src+"'><br><a href='"+bigimg[picid].url+"' class='textstyle'>"+bigimg[picid].message+"</a>"
fadestrength=0
fadein()
}
}
function fadein() {
if (fadestrength<100) {
blockmouseover=true
fadestrength+=10
if (ns6) {
document.getElementById('bigpic').style.opacity=(fadestrength/100)
}
if (ie) {
var thisfilter=eval('bigpic')
thisfilter.filters.alpha.opacity=Math.round(fadestrength)
}
fadetimer=setTimeout("fadein()",40)
}
else {
clearTimeout(fadetimer)
blockmouseover=false
}
}
if (ie || ns6) {
for (i=0;i<=numberofimages;i++) {
document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;visibility:hidden' class='thumbnailstyle'></span>")
}
window.onload=setValues
}
</script>
<!-- END OF PART 2 OF THE IMAGE GALLERY CODE -->