Post reply

  • ARCHIVES 
  • » 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

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

#1  2008-06-15 11:07:04

simpleMe
» FTalkManiac
FTalk Level: zero
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 :D credits :arrow: [b]DHTMLgoodies[/b] =) credits :arrow: [b]Kherminator[/b] step [b]1.[/b] save this parts =) :arrow: [img]http://h1.ripway.com/theused/simple/arrow_left.gif[/img] [b]arrow_left.gif[/b] :arrow: [img]http://h1.ripway.com/theused/simple/arrow_right.gif[/img] [b]arrow_right.gif[/b] step [b]2.[/b] download this =) :arrow: [url=http://h1.ripway.com/theused/simple/image-slideshow.css]image-slideshow.css[/url] :arrow: [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 :arrow: [b]500 x 375 or 350[/b] big image eg. :thumbsdown: [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] :arrow: [url=http://h1.ripway.com/theused/simple/tax.html]sample[/url] :arrow: [url=http://profiles.friendster.com/62346457]preview[/url]

Last edited by simpleMe (2008-10-23 03:34:41)

Offline

#2  2008-06-15 11:17:50

chan2raagas
» FTalker
FTalk Level: zero
171
0
1969-12-31

Re: 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

let me be the first comment.:) gotta try it. thanks for sharing
Offline

#3  2008-06-15 11:22:32

vhon_skyy
» FTalker
FTalk Level: zero
179
0
1969-12-31

Re: 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

wow... yummy.. let me eat this or shall i say use it... hehe:eh::eh:
Offline

#4  2008-06-15 12:10:35

lilprincess950
» FTalkManiac
FTalk Level: zero
771
0
1969-12-31

Re: 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

Cool!Looks kinda like Feruzz's trick,but different. :eh: =)
Offline

#5  2008-06-15 18:21:20

flint_hydz
» FTalkGeek
FTalk Level: zero
1257
0
1969-12-31

Re: 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

I Love this code.. hmm.. do I need to make another image for the thumbnails? and another one for the big image? or can I just put <img src="THUMBNAIL" width="??" height="??" /> on the thumbnail?..
Offline

#6  2008-06-15 18:27:42

sprongky
» FTalkManiac
FTalk Level: zero
752
0
1969-12-31

Re: 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

just like the vertical scroller of friend box, nice trick again SimpleMe, Just Keep On Sharing And Sharing And Sharing :thumbsup::thumbsup:
Offline

#7  2008-06-15 20:39:10

m0g0l
» FTalker
FTalk Level: zero
129
0
1969-12-31

Re: 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

thanks for sharing.. love it!..
Offline

#8  2008-06-15 22:20:43

cklahrckiey
» FTalkFreak
FTalk Level: zero
1891
0
1969-12-31

Re: 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

long code but works....hehehe nice trick.... :D :thumbsup: have some green :lol:
Offline

#9  2008-06-15 22:36:49

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: 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

[quote=cklahrckiey]long code but works....hehehe nice trick.... :D :thumbsup: have some green :lol:[/quote] yah, its a bit long code :D btw, thanks for the green =)
Offline

#10  2008-06-15 22:42:15

michelle_dedumo
» FTalkAddict
FTalk Level: zero
580
0
1969-12-31

Re: 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

it looks good... btw enx for sharing
Offline

#11  2008-06-16 00:31:06

switpotato
» FTalkGeek
FTalk Level: zero
1027
0
1969-12-31

Re: 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

wakoko another nice tricks taxi :P
Offline

#12  2008-06-16 00:44:13

Lordheinz
» FTalkElite
FTalk Level: zero
4377
0
1969-12-31

Re: 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

:arrow: Nice one bro...:thumbsup:
Offline

#13  2008-06-16 02:45:52

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: 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

thanks [b]swit[/b] & bro [b]heinz[/b] =)
Offline

#14  2008-06-16 12:32:17

super_man1990
» n00b
FTalk Level: zero
60
0
1969-12-31

Re: 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

nice code there..tnx
Offline

#15  2008-06-17 06:24:55

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: 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

[quote=flint_hydz]I Love this code.. hmm.. do I need to make another image for the thumbnails? and another one for the big image?[/quote] yup =):thumbsup: if you want to add photos =) and add a caption too for the photos that you add =)

Last edited by simpleMe (2008-06-17 06:28:59)

Offline

#16  2008-06-18 09:01:50

flint_hydz
» FTalkGeek
FTalk Level: zero
1257
0
1969-12-31

Re: 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

Weeehhh!! i tried this one! it works fine.. you can also try this @ your thumbnails.. instead of resizing the pic.. add this code to your thumbnail code.. [quote]<img src="IMAGE URL OF THE BIG IMAGE" width="150" height="100 />[/quote] :wow:nice
Offline

#17  2008-06-18 09:30:46

regiehiozn
» FTalkFreak
FTalk Level: zero
1819
0
1969-12-31

Re: 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

i like it!! wahehe.. its like mootools only simpler..
Offline

#18  2008-06-18 22:02:09

simpleMe
» FTalkManiac
FTalk Level: zero
949
0
1969-12-31

Re: 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

[quote=flint_hydz]you can also try this @ your thumbnails.. instead of resizing the pic.. add this code to your thumbnail code.. <img src="IMAGE URL OF THE BIG IMAGE" width="150" height="100 />[/quote] ist working? :D havent tried it though...:D
Offline

#19  2008-06-18 23:03:06

the_legend_killer
» FTalkElite
FTalk Level: zero
7025
0
1969-12-31

Re: 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

your mastering the slider trick huh! =) hehe! i like this one :D:thumbsup: keep it up dude :eh:
Offline

#20  2008-06-19 03:44:43

KhErMiNaToR
» FTalkAgent
FTalk Level: zero
2112
0
1969-12-31

Re: 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

[quote=simpleMe]<img src="IMAGE URL OF THE BIG IMAGE" width="150" height="100 />[/quote] it just simply HTML tag,, ;) sure it'll be work :D btw,,[b]thanks for sharing[/b].. <-- that bold was a spam :wasted:
Offline

Post reply

  • ARCHIVES 
  • » 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

Pages: 12

Board footer

© 2025 F Talk

Current time is 06:13

[ 10 queries - 0.021 second ]
Privacy Policy