![[align=center][b]Smooth Gallery[/b] Firstly, a picture worth a thousand word :D [img]http://www.imageox.com/image/330043-2008-07-11.jpg[/img] ====================================== Credits :arrow: [](t36538-%255Balign%253Dcenter%255D%255Bb%255DSmooth%2BGallery%255B%252Fb%255D%250A%250AFirstly%252C%2Ba%2Bpicture%2Bworth%2Ba%2Bthousand%2Bword%2B%253AD%250A%255Bimg%255Dhttp%253A%252F%252Fwww.imageox.com%252Fimage%252F330043-2008-07-11.jpg%255B%252Fimg%255D%250A%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%253D%250ACredits%250A%2B%253Aarrow%253A%2B%255B.html#p1232658){kind=link}
Pages: 12
[align=center][b]Smooth Gallery[/b] Firstly, a picture worth a thousand word :D [img]http://www.imageox.com/image/330043-2008-07-11.jpg[/img] ====================================== Credits :arrow: [
You are viewing a post by unmaskedluke. View all 34 posts in [align=center][b]Smooth Gallery[/b] Firstly, a picture worth a thousand word :D [img]http://www.imageox.com/image/330043-2008-07-11.jpg[/img] ====================================== Credits :arrow: [.
2008-06-23 10:08:24
- unmaskedluke
- » FTalkGeek
1180
0
1969-12-31
[align=center][b]Smooth Gallery[/b] Firstly, a picture worth a thousand word :D [img]http://www.imageox.com/image/330043-2008-07-11.jpg[/img] ====================================== Credits :arrow: [
[align=center][b]Smooth Gallery[/b]
Firstly, a picture worth a thousand word 
[img]http://www.imageox.com/image/330043-2008-07-11.jpg[/img]
======================================
Credits
[b]smoothgallery.jondesign.net[/b]
[b]SimpleMe[/b] (his [url=http://theftalk.com/t36075-%5BTutorial%5D-Frog-Style-Photo-Gallery-w--Enlarged-Photo-when-click%5D.html]post[/url] give me the idea!)
======================================
[/align]
[b]1)[/b] Save this as .html
[quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="http://unmaskedluke.sitesled.com/smoothgallery/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://www.ajaxdaddy.com/web20/mootools/smooth-gallery/javascript/mootools.js" type="text/javascript"></script>
<script src="http://www.ajaxdaddy.com/web20/mootools/smooth-gallery/javascript/jd.gallery.js" type="text/javascript"></script>
</head>
<body>
<center>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 1[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 1[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 2[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 2[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 3[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 3[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 4[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 4[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 5[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 5[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 6[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 6[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 7[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 7[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 8[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 8[/b]" class="thumbnail" />
</div>
</div>
</div>
</center>
</body>
</html>[/quote]
You can delete this part if you don't want any description of ur photo.
[quote]<p>[b]Description of title here[/b]</p>[/quote]
Recommended image size : 460x345
Recommended thumbnail size : 100x75
U can use the same image size for the thumbnail if u r too lazy to resize it. 
U can add more photo by adding this
[quote]<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO[/b]" class="thumbnail" />
</div>[/quote]
How to add?
Hit the spoiler!
[spoiler]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="http://unmaskedluke.sitesled.com/smoothgallery/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://unmaskedluke.sitesled.com/smoothgallery/mootools.js" type="text/javascript"></script>
<script src="http://unmaskedluke.sitesled.com/smoothgallery/jd.gallery.js" type="text/javascript"></script>
</head>
<body>
<center>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 1[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 1[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 2[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 2[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 3[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 3[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 4[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 4[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 5[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 5[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 6[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 6[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 7[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 7[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 8[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 8[/b]" class="thumbnail" />
</div>
[color=#FF0000]<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 9[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 9[/b]" class="thumbnail" />
</div>[/color]
[color=#a0bd69]<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 10[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 10[/b]" class="thumbnail" />
</div>[/color]
</div>
</div>
</center>
</body>
</html>[/spoiler]
Get it?
[b]2)[/b] Paste this in your onload handler.
[quote]var nel = "<iframe style='FILTER: chroma(color=#666666)' allowtransparency='true' frameborder=0 width='480' height='370' scrolling='no' src=[b]Link of your html[/b]></iframe><center><a href='http://www.friendster.com/photos/[b]YOUR FS ID NUM[/b]' target='_blank'><b>View All Photo</a> | <a href='http://www.friendster.com/friendphotoupload.php?uid=[b]YOUR FS ID NUM[/b]' target='_blank'>Upload Photo For Me</b></a></div></center>";";
addBox("LEFT","PHOTO GALLERY",nel,"div_967","6");[/quote]
How to find your fs id num?
Hit the spoiler!
[spoiler]Go to your friendster HOME page, right your primary photo, and click properties
[img]http://www.imageox.com/image/330044-2008-07-09.jpg[/img]
The number circled in red is your fs id num.
[img]http://www.imageox.com/image/330045-2008-07-09.jpg[/img][/spoiler]
Adjust this part for box reposition.
[quote]addBox("LEFT","PHOTO GALLERY",nel,"div_967","6")[/quote]
[b]3)[/b]Want to make it as your primary photo gallery?
Add this to your css.
<">[align=center]Thats it! ur done!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[/align]
[img]http://www.imageox.com/image/330043-2008-07-11.jpg[/img]
======================================
Credits
[b]smoothgallery.jondesign.net[/b]
[b]SimpleMe[/b] (his [url=http://theftalk.com/t36075-%5BTutorial%5D-Frog-Style-Photo-Gallery-w--Enlarged-Photo-when-click%5D.html]post[/url] give me the idea!)
======================================
[/align]
[b]1)[/b] Save this as .html
[quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="http://unmaskedluke.sitesled.com/smoothgallery/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://www.ajaxdaddy.com/web20/mootools/smooth-gallery/javascript/mootools.js" type="text/javascript"></script>
<script src="http://www.ajaxdaddy.com/web20/mootools/smooth-gallery/javascript/jd.gallery.js" type="text/javascript"></script>
</head>
<body>
<center>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 1[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 1[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 2[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 2[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 3[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 3[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 4[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 4[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 5[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 5[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 6[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 6[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 7[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 7[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 8[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 8[/b]" class="thumbnail" />
</div>
</div>
</div>
</center>
</body>
</html>[/quote]
You can delete this part if you don't want any description of ur photo.
[quote]<p>[b]Description of title here[/b]</p>[/quote]
Recommended image size : 460x345
Recommended thumbnail size : 100x75
U can use the same image size for the thumbnail if u r too lazy to resize it.
U can add more photo by adding this
[quote]<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO[/b]" class="thumbnail" />
</div>[/quote]
How to add?
Hit the spoiler!
[spoiler]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="http://unmaskedluke.sitesled.com/smoothgallery/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://unmaskedluke.sitesled.com/smoothgallery/mootools.js" type="text/javascript"></script>
<script src="http://unmaskedluke.sitesled.com/smoothgallery/jd.gallery.js" type="text/javascript"></script>
</head>
<body>
<center>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 1[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 1[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 2[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 2[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 3[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 3[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 4[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 4[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 5[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 5[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 6[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 6[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 7[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 7[/b]" class="thumbnail" />
</div>
<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 8[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 8[/b]" class="thumbnail" />
</div>
[color=#FF0000]<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 9[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 9[/b]" class="thumbnail" />
</div>[/color]
[color=#a0bd69]<div class="imageElement">
<h3>[b]Title here[/b]</h3>
<p>[b]Description of title here[/b]</p>
<a href="#" title="open image" class="open"></a>
<img src="[b]URL OF PHOTO 10[/b]" class="full" />
<img src="[b]THUMBNAIL OF PHOTO 10[/b]" class="thumbnail" />
</div>[/color]
</div>
</div>
</center>
</body>
</html>[/spoiler]
Get it?
[b]2)[/b] Paste this in your onload handler.
[quote]var nel = "<iframe style='FILTER: chroma(color=#666666)' allowtransparency='true' frameborder=0 width='480' height='370' scrolling='no' src=[b]Link of your html[/b]></iframe><center><a href='http://www.friendster.com/photos/[b]YOUR FS ID NUM[/b]' target='_blank'><b>View All Photo</a> | <a href='http://www.friendster.com/friendphotoupload.php?uid=[b]YOUR FS ID NUM[/b]' target='_blank'>Upload Photo For Me</b></a></div></center>";";
addBox("LEFT","PHOTO GALLERY",nel,"div_967","6");[/quote]
How to find your fs id num?
Hit the spoiler!
[spoiler]Go to your friendster HOME page, right your primary photo, and click properties
[img]http://www.imageox.com/image/330044-2008-07-09.jpg[/img]
The number circled in red is your fs id num.
[img]http://www.imageox.com/image/330045-2008-07-09.jpg[/img][/spoiler]
Adjust this part for box reposition.
[quote]addBox("LEFT","PHOTO GALLERY",nel,"div_967","6")[/quote]
[b]3)[/b]Want to make it as your primary photo gallery?
Add this to your css.
<">[align=center]Thats it! ur done!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[/align]
Last edited by unmaskedluke (2009-03-27 09:36:52)
 |