[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]FrogJS Javascript Gallery[/b] just sharing guys =) hope you like it =) [b]Step 1.[/b] Make a thumbnail image of your big image
You are viewing a post by simpleMe. View all 46 posts in [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]FrogJS Javascript Gallery[/b] just sharing guys =) hope you like it =) [b]Step 1.[/b] Make a thumbnail image of your big image.
2008-06-19 03:38:31
- simpleMe
- » FTalkManiac
949
0
1969-12-31
[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]FrogJS Javascript Gallery[/b] just sharing guys =) hope you like it =) [b]Step 1.[/b] Make a thumbnail image of your big image
[color=#FF0000]For Educational Purpose Only[/color]
credits 
[b]FrogJS Javascript Gallery[/b]
just sharing guys 
hope you like it
[b]Step 1.[/b] Make a thumbnail image of your big image
recommended [b]100 x80[/b] or [b]80x60[/b] pixels
thumbnail eg. [img]http://img299.imageshack.us/img299/795/88430257vx3.jpg[/img]
[b]Step 2.[/b] Resize your big image
recommended [b]500x400[/b]
big image eg. 
[img]http://img502.imageshack.us/img502/1396/82913687kl2.jpg[/img]
[b]Step 3.[/b] save this as [b].html[/b]
[quote]<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frog Style Photo Gallery by tax</title>
<script type="text/javascript" src="http://h1.ripway.com/theused/commentBg/prototype.js "></script>
<script type="text/javascript" src="http://h1.ripway.com/theused/commentBg/effects.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/theused/commentBg/frog.js"></script>
<style type="text/css">
body{
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: .7em;
}
#FrogJS{
width: 500px;
height: 600px;
margin: 0 auto;
}
#FrogJSCredit{
text-align: center;
font-size: 80%;
color: #ff0000;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}
</style>
</head>
<body>
<div id="FrogJS">
<a href="[b]Big image 1[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 1[/b]" alt="[b]Caption for image 1[/b]" />
</a>
<a href="[b]Big image 2[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 2[/b]" alt="[b]Caption for image 2[/b]" />
</a>
<a href="[b]Big image 3[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 3[/b]" alt="[b]Caption for image 3[/b]" />
</a>
<a href="[b]Big image 4[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 4[/b]" alt="[b]Caption for image 4[/b]" />
</a>
<a href="[b]Big image 5[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 5[/b]" alt="[b]Caption for image 5[/b]" />
</a>
<a href="[b]Big image 6[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 6[/b]" alt="[b]Caption for image 6[/b]" />
</a>
<a href="[b]Big image 7[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 7[/b]" alt="[b]Caption for image 7[/b]" />
</a>
<a href="[b]Big image 8[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 8[/b]" alt="[b]Caption for image 8[/b]" />
</a>
<a href="[b]Big image 9[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 9[/b]" alt="[b]Caption for image 9[/b]" />
</a>
<a href="[b]Big image 10[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 10[/b]" alt="[b]Caption for image 10[/b]" />
</a>
<a href="[b]Big image 11[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 11[/b]" alt="[b]Caption for image 11[/b]" />
</a>
<a href="[b]Big image 12[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 12[/b]" alt="[b]Caption for image 12[/b]" />
</a>
<a href="[b]Big image 13[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 13[/b]" alt="[b]Caption for image 13[/b]" />
</a>
<a href="[b]Big image 14[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 14[/b]" alt="[b]Caption for image 14[/b]" />
</a>
<a href="[b]Big image 15[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 15[/b]" alt="[b]Caption for image 15[/b]" />
</a>
<a href="[b]Big image 16[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 16[/b]" alt="[b]Caption for image 16[/b]" />
</a>
<a href="[b]Big image 17[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 17[/b]" alt="[b]Caption for image 17[/b]" />
</a>
<a href="[b]Big image 18[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 18[/b]" alt="[b]Caption for image 18[/b]" />
</a>
<a href="[b]Big image 19[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 19[/b]" alt="[b]Caption for image 19[/b]" />
</a>
<a href="[b]Big image 20[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 20[/b]" alt="[b]Caption for image 20[/b]" />
</a>
</div>
</body>
</html>[/quote]
just edit the bold parts
if you want to add more photos, justs used your common sense
[b]Step 4.[/b] Paste this on your js extension
[quote]window.addEvent('domready', function() {
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='520' height='520' 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://img299.imageshack.us/img299/830/65482546zb3.gif[/img]
the circle part is your thumbnail
when you click that it will expand
[url=http://h1.ripway.com/theused/commentBg/frog.html]Sample[/url]
[url=http://profiles.friendster.com/70910422]Preview[/url]
just click the thumbnail in the side of my sample & preview
btw, i just repeat the photos & captions in my sample and preview
[b]FrogJS Javascript Gallery[/b]
just sharing guys
hope you like it
[b]Step 1.[/b] Make a thumbnail image of your big image
recommended [b]100 x80[/b] or [b]80x60[/b] pixels
thumbnail eg. [img]http://img299.imageshack.us/img299/795/88430257vx3.jpg[/img]
[b]Step 2.[/b] Resize your big image
recommended [b]500x400[/b]
big image eg.
[img]http://img502.imageshack.us/img502/1396/82913687kl2.jpg[/img]
[b]Step 3.[/b] save this as [b].html[/b]
[quote]<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Frog Style Photo Gallery by tax</title>
<script type="text/javascript" src="http://h1.ripway.com/theused/commentBg/prototype.js "></script>
<script type="text/javascript" src="http://h1.ripway.com/theused/commentBg/effects.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/theused/commentBg/frog.js"></script>
<style type="text/css">
body{
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: .7em;
}
#FrogJS{
width: 500px;
height: 600px;
margin: 0 auto;
}
#FrogJSCredit{
text-align: center;
font-size: 80%;
color: #ff0000;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}
</style>
</head>
<body>
<div id="FrogJS">
<a href="[b]Big image 1[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 1[/b]" alt="[b]Caption for image 1[/b]" />
</a>
<a href="[b]Big image 2[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 2[/b]" alt="[b]Caption for image 2[/b]" />
</a>
<a href="[b]Big image 3[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 3[/b]" alt="[b]Caption for image 3[/b]" />
</a>
<a href="[b]Big image 4[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 4[/b]" alt="[b]Caption for image 4[/b]" />
</a>
<a href="[b]Big image 5[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 5[/b]" alt="[b]Caption for image 5[/b]" />
</a>
<a href="[b]Big image 6[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 6[/b]" alt="[b]Caption for image 6[/b]" />
</a>
<a href="[b]Big image 7[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 7[/b]" alt="[b]Caption for image 7[/b]" />
</a>
<a href="[b]Big image 8[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 8[/b]" alt="[b]Caption for image 8[/b]" />
</a>
<a href="[b]Big image 9[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 9[/b]" alt="[b]Caption for image 9[/b]" />
</a>
<a href="[b]Big image 10[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 10[/b]" alt="[b]Caption for image 10[/b]" />
</a>
<a href="[b]Big image 11[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 11[/b]" alt="[b]Caption for image 11[/b]" />
</a>
<a href="[b]Big image 12[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 12[/b]" alt="[b]Caption for image 12[/b]" />
</a>
<a href="[b]Big image 13[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 13[/b]" alt="[b]Caption for image 13[/b]" />
</a>
<a href="[b]Big image 14[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 14[/b]" alt="[b]Caption for image 14[/b]" />
</a>
<a href="[b]Big image 15[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 15[/b]" alt="[b]Caption for image 15[/b]" />
</a>
<a href="[b]Big image 16[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 16[/b]" alt="[b]Caption for image 16[/b]" />
</a>
<a href="[b]Big image 17[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 17[/b]" alt="[b]Caption for image 17[/b]" />
</a>
<a href="[b]Big image 18[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 18[/b]" alt="[b]Caption for image 18[/b]" />
</a>
<a href="[b]Big image 19[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 19[/b]" alt="[b]Caption for image 19[/b]" />
</a>
<a href="[b]Big image 20[/b]" title="[b]Name[/b]" rel="http://www.friendster.com/photos/[b]########[/b]">
<img src="[b]Thumbnail image 20[/b]" alt="[b]Caption for image 20[/b]" />
</a>
</div>
</body>
</html>[/quote]
just edit the bold parts
if you want to add more photos, justs used your common sense
[b]Step 4.[/b] Paste this on your js extension
[quote]window.addEvent('domready', function() {
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='520' height='520' 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://img299.imageshack.us/img299/830/65482546zb3.gif[/img]
the circle part is your thumbnail
when you click that it will expand
[url=http://h1.ripway.com/theused/commentBg/frog.html]Sample[/url]
[url=http://profiles.friendster.com/70910422]Preview[/url]
just click the thumbnail in the side of my sample & preview
btw, i just repeat the photos & captions in my sample and preview
Last edited by simpleMe (2008-10-23 03:30:52)
 |