Pages: 12
this script is a Neat Slider on your Photo Gallery w/ caption & Loading when click :D credits :arrow: [b]DHTMLgoodies[/b] =) credits :arrow: [b]Kherminator[/b] step [b]1.[/b] save this parts =) :a
You are viewing a post by simpleMe. View all 38 posts in this script is a Neat Slider on your Photo Gallery w/ caption & Loading when click :D credits :arrow: [b]DHTMLgoodies[/b] =) credits :arrow: [b]Kherminator[/b] step [b]1.[/b] save this parts =) :a.
2008-06-15 11:07:04
- simpleMe
- » FTalkManiac
949
0
1969-12-31
this script is a Neat Slider on your Photo Gallery w/ caption & Loading when click :D credits :arrow: [b]DHTMLgoodies[/b] =) credits :arrow: [b]Kherminator[/b] step [b]1.[/b] save this parts =) :a
this script is a Neat Slider on your Photo Gallery w/ caption & Loading when click 
credits 
[b]DHTMLgoodies[/b] 
credits [b]Kherminator[/b]
step [b]1.[/b] save this parts
[img]http://h1.ripway.com/theused/simple/arrow_left.gif[/img] [b]arrow_left.gif[/b]
[img]http://h1.ripway.com/theused/simple/arrow_right.gif[/img] [b]arrow_right.gif[/b]
step [b]2.[/b] download this
[url=http://h1.ripway.com/theused/simple/image-slideshow.css]image-slideshow.css[/url]
[url=http://h1.ripway.com/theused/simple/image-slideshow.js]image-slideshow.js[/url]
btw, save the [b]image-slideshow.js[/b] as [b]image-slideshow.js[/b]
dont rename it
step [b]3.[/b] Resize your big image
recommended [b]500 x 375 or 350[/b]
big image eg. 
[img]http://h1.ripway.com/theused/simple/image1_big.jpg[/img]
step [b]4.[/b] save this as [b].html[/b]
[quote]<html>
<head>
<title>Image slideshow</title>
<link rel="stylesheet" href="[b]image-slideshow.css Link here[/b]" type="text/css">
<script type="text/javascript" src="image-slideshow.js">
/***********************************************************************************************
***********************************************************************************************/
</script>
</head>
<body>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="[b]Link of Big Image 1[/b]">
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><img src="[b]arrow_left.gif Link here[/b]"></div>
<div id="arrow_right"><img src="[b]arrow_right.gif Link here[/b]"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" onclick="showPreview('[b]Link of Big Image 1[/b]','1');return false"><img src="[b]Link of image 1[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 2[/b]','2');return false"><img src="[b]Link of image 2[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 3[/b]','3');return false"><img src="[b]Link of image 3[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 4[/b]','4');return false"><img src="[b]Link of image 4[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 5[/b]','5');return false"><img src="[b]Link of image 5[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 6[/b]','6');return false"><img src="[b]Link of image 6[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 7[/b]','7');return false"><img src="[b]Link of image 7[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 8[/b]','8');return false"><img src="[b]Link of image 8[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 9[/b]','9');return false"><img src="[b]Link of image 9[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 10[/b]','10');return false"><img src="[b]Link of image 10[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 11[/b]','11');return false"><img src="[b]Link of image 11[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 12[/b]','12');return false"><img src="[b]Link of image 12[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 13[/b]','13');return false"><img src="[b]Link of image 13[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 14[/b]','14');return false"><img src="[b]Link of image 14[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 15[/b]','15');return false"><img src="[b]Link of image 15[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 16[/b]','16');return false"><img src="[b]Link of image 16[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 17[/b]','17');return false"><img src="[b]Link of image 17[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 18[/b]','18');return false"><img src="[b]Link of image 18[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 19[/b]','19');return false"><img src="[b]Link of image 19[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 20[/b]','20');return false"><img src="[b]Link of image 20[/b]" width="150px" height="100px" /></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">[b]This is the caption of image number 1[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 2[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 3[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 4[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 5[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 6[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 7[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 8[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 9[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 10[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 11[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 12[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 13[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 14[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 15[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 16[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 17[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 18[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 19[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 20[/b]</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
</body>
</html>[/quote]
just edit the bold parts
btw, if you want to add more photos just used your common sense
step [b]6.[/b] paste this on your Onload Handler
[quote]window.addEvent('domready', function() {
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='520' height='580' scrolling='no' src=[b]Link of your html[/b]></iframe><br><br><a href=\"http://www.friendster.com/viewphotos.php?a=0&uid=[b]Your id[/b]\"><b>View All Photos</b></a><br><br></center>";
document.getElementById('content_1').style.height='100%';
document.getElementById('content_1').style.overflowY='hidden';
document.getElementById('content_1').innerHTML = "<table width='100%'><tr><td align='center'>"+tax+"</td></tr></table>";
});[/quote]
just edit the bold parts then your done
[b]Screenshots[/b]
[img]http://img102.imageshack.us/img102/6717/48463885fh0.png[/img]
[url=http://h1.ripway.com/theused/simple/tax.html]sample[/url]
[url=http://profiles.friendster.com/62346457]preview[/url]
credits [b]DHTMLgoodies[/b]
credits [b]Kherminator[/b]
step [b]1.[/b] save this parts
[img]http://h1.ripway.com/theused/simple/arrow_left.gif[/img] [b]arrow_left.gif[/b]
[img]http://h1.ripway.com/theused/simple/arrow_right.gif[/img] [b]arrow_right.gif[/b]
step [b]2.[/b] download this
[url=http://h1.ripway.com/theused/simple/image-slideshow.css]image-slideshow.css[/url]
[url=http://h1.ripway.com/theused/simple/image-slideshow.js]image-slideshow.js[/url]
btw, save the [b]image-slideshow.js[/b] as [b]image-slideshow.js[/b]
dont rename it
step [b]3.[/b] Resize your big image
recommended [b]500 x 375 or 350[/b]
big image eg.
[img]http://h1.ripway.com/theused/simple/image1_big.jpg[/img]
step [b]4.[/b] save this as [b].html[/b]
[quote]<html>
<head>
<title>Image slideshow</title>
<link rel="stylesheet" href="[b]image-slideshow.css Link here[/b]" type="text/css">
<script type="text/javascript" src="image-slideshow.js">
/***********************************************************************************************
***********************************************************************************************/
</script>
</head>
<body>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="[b]Link of Big Image 1[/b]">
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><img src="[b]arrow_left.gif Link here[/b]"></div>
<div id="arrow_right"><img src="[b]arrow_right.gif Link here[/b]"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" onclick="showPreview('[b]Link of Big Image 1[/b]','1');return false"><img src="[b]Link of image 1[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 2[/b]','2');return false"><img src="[b]Link of image 2[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 3[/b]','3');return false"><img src="[b]Link of image 3[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 4[/b]','4');return false"><img src="[b]Link of image 4[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 5[/b]','5');return false"><img src="[b]Link of image 5[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 6[/b]','6');return false"><img src="[b]Link of image 6[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 7[/b]','7');return false"><img src="[b]Link of image 7[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 8[/b]','8');return false"><img src="[b]Link of image 8[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 9[/b]','9');return false"><img src="[b]Link of image 9[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 10[/b]','10');return false"><img src="[b]Link of image 10[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 11[/b]','11');return false"><img src="[b]Link of image 11[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 12[/b]','12');return false"><img src="[b]Link of image 12[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 13[/b]','13');return false"><img src="[b]Link of image 13[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 14[/b]','14');return false"><img src="[b]Link of image 14[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 15[/b]','15');return false"><img src="[b]Link of image 15[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 16[/b]','16');return false"><img src="[b]Link of image 16[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 17[/b]','17');return false"><img src="[b]Link of image 17[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 18[/b]','18');return false"><img src="[b]Link of image 18[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 19[/b]','19');return false"><img src="[b]Link of image 19[/b]" width="150px" height="100px" /></a>
<a href="#" onclick="showPreview('[b]Link of Big Image 20[/b]','20');return false"><img src="[b]Link of image 20[/b]" width="150px" height="100px" /></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">[b]This is the caption of image number 1[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 2[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 3[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 4[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 5[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 6[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 7[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 8[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 9[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 10[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 11[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 12[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 13[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 14[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 15[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 16[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 17[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 18[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 19[/b]</div>
<div class="imageCaption">[b]This is the caption of image number 20[/b]</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
</body>
</html>[/quote]
just edit the bold parts
btw, if you want to add more photos just used your common sense
step [b]6.[/b] paste this on your Onload Handler
[quote]window.addEvent('domready', function() {
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='520' height='580' scrolling='no' src=[b]Link of your html[/b]></iframe><br><br><a href=\"http://www.friendster.com/viewphotos.php?a=0&uid=[b]Your id[/b]\"><b>View All Photos</b></a><br><br></center>";
document.getElementById('content_1').style.height='100%';
document.getElementById('content_1').style.overflowY='hidden';
document.getElementById('content_1').innerHTML = "<table width='100%'><tr><td align='center'>"+tax+"</td></tr></table>";
});[/quote]
just edit the bold parts then your done
[b]Screenshots[/b]
[img]http://img102.imageshack.us/img102/6717/48463885fh0.png[/img]
[url=http://h1.ripway.com/theused/simple/tax.html]sample[/url]
[url=http://profiles.friendster.com/62346457]preview[/url]
Last edited by simpleMe (2008-10-23 03:34:41)
 |