Hi all,
After some questions about what script i use on my frontpage and how to use it, i thought i better start a topic about it. :)
The script is called JonDesign's SmoothGallery (http://smoothgallery.jondesign.net/what/).
How to use this:
1. Download the script Here (http://smoothgallery.jondesign.net/download/)
2. Unzip, Rename the folder "SmoothGallery-1.0.1" to "SmoothGallery" and upload everything to your forum root.
3. Then put this code in a scriptbox:
<script src="SmoothGallery/scripts/mootools.js" type="text/javascript"></script>
<script src="SmoothGallery/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="SmoothGallery/css/jd.gallery.css" type="text/css" media="screen" />
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 8000,
showArrows: false,
showCarousel: false
});
}
window.onDomReady(startGallery);
</script>
<center><div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/1.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/2.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div></center>
# The above code is only for 2 images. Add this code if you want to use more:
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="mypage3.html" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/3.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/3-mini.jpg" class="thumbnail" />
</div>
# Change this code to 5000 or 9000 (or whatever you like) if you want the fading delay slower or faster:
delay: 8000,
4. Upload your images to SmoothGallery -> images. Don't forget to change url's in your code.
5. Change SmoothGallery width, height, colors etc... in SmoothGallery -> css -> jd.gallery
That's it, your done. ;)
All credits JonDesign (http://www.jondesign.net/)
Note: There are another 4 showcase options in SmoothGallery: non-timed gallery, timed gallery, simple timed slideshow, simple showcase slideshow. I used the simple timed slideshow in first code. Read more about it Here (http://smoothgallery.jondesign.net/getting-started/).
To use another option, just replace this code:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 8000,
showArrows: false,
showCarousel: false
});
}
window.onDomReady(startGallery);
</script>
Cheers.
Thanks dude :coolsmiley:
I am setting this snippet up on my board, i will edit this if I finish it and get it to work right :D
-----
Ok i got it setup. But the text isnt showing up on the picture
<script src="SmoothGallery/scripts/mootools.js" type="text/javascript"></script>
<script src="SmoothGallery/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="SmoothGallery/css/jd.gallery.css" type="text/css" media="screen" />
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 8000,
showArrows: false,
showCarousel: false
});
}
window.onDomReady(startGallery);
</script>
<center><div id="myGallery">
<div class="imageElement">
<h3>Forum</h3>
<p>Post in our forums, meet other people and get help and talk on any subject!</p>
<a href="http://brianjwilson.com/index.php?action=forum" title="open image" class="open"></a>
<img src="SmoothGallery/images/Forum.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Arcade</h3>
<p>Play our 630 games in our arcade. Defeat your old scores and other peoples scores!</p>
<a href="http://brianjwilson.com/index.php?action=arcade" title="open image" class="open"></a>
<img src="SmoothGallery/images/Arcade.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Chat</h3>
<p>Chat to people in our chat rooms. Create chat rooms and have private parties!</p>
<a href="http://brianjwilson.com/index.php?action=chat" title="open image" class="open"></a>
<img src="SmoothGallery/images/Chat.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Avatar Maker</h3>
<p>Create avatars and personalities. Change the avatar for different occassions. Make it look like you or another person!</p>
<a href="http://brianjwilson.com/index.php?action=avtr" title="open image" class="open"></a>
<img src="SmoothGallery/images/Avatar Maker.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Downloads</h3>
<p>Download some of our totally free downloads. Files, Music, Videos, Pictures, and more!</p>
<a href="http://brianjwilson.com/index.php?action=tpmod;dl" title="open image" class="open"></a>
<img src="SmoothGallery/images/Downloads.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Gallery</h3>
<p>Upload pictures to our gallery. View funny pictures and more! Rate and view pictures!</p>
<a href="http://brianjwilson.com/index.php?action=gallery" title="open image" class="open"></a>
<img src="SmoothGallery/images/Gallery.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Shop</h3>
<p>Buy items in the shop that will inhance your view of the forum, buy items that will decrease someone elses status!</p>
<a href="http://brianjwilson.com/index.php?action=shop" title="open image" class="open"></a>
<img src="SmoothGallery/images/Shop.jpg" class="full" />
<img src="SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div></center>
Brianjw
that's a great tool !!! used it with images i uploaded in another server simply by giving it the right url , but i can't resize the images or the thumbnails !!! could anyone help ?
btw that could be a great block but when i put it in a right block the sizes of the images shown go nuts !!! doesn't look good !!!
Quote from: Brianjw on March 06, 2007, 12:39:18 PM
Ok i got it setup. But the text isnt showing up on the picture
Brianjw
Hmm that's weird...your code looks fine to me. Did you perhaps changed anything in the ccs files?
Quote from: MinasC on March 07, 2007, 02:52:06 PM
that's a great tool !!! used it with images i uploaded in another server simply by giving it the right url , but i can't resize the images or the thumbnails !!! could anyone help ?
btw that could be a great block but when i put it in a right block the sizes of the images shown go nuts !!! doesn't look good !!!
Did you try and change the width and height in SmoothGallery -> css -> jd.gallery?
#myGallery
{
width: 460px;
height: 345px;
z-index:5;
display: none;
border: 1px solid #000;
}
yes but that only changes the size of the gallery , not the size of the photos it shows !!! as a result it shows only a part of each photo !!! is that because the photos are stored in imageshack.us servers and not my forum's as they were supposed to be ? can it be fixed ?
Quote from: whoesa on March 07, 2007, 06:57:54 PM
Quote from: Brianjw on March 06, 2007, 12:39:18 PM
Ok i got it setup. But the text isnt showing up on the picture
Brianjw
Hmm that's weird...your code looks fine to me. Did you perhaps changed anything in the ccs files?
I haven't modified the css. I even tried changing the directory name to what you whoesa and took your code on the homepage of your site but it didn't work either ???
Quote from: Brianjw on March 07, 2007, 11:43:34 PM
I haven't modified the css. I even tried changing the directory name to what you whoesa and took your code on the homepage of your site but it didn't work either ???
Brian, i tried your code on my site and it shows up nicely. Maybe some other script/snippet on your site doesn't like the SmoothGallery much? ???
@ MinasC
Why don't you just resize your images in an image editor first to the same size of the gallery? That's what i did and i see the images in full width. I don't think it has something to do with imageshack but im not 100% sure.
hmm , that's a good idea , it should work !!! i should resize them and upload them twice though because when you feed it with images uploaded in another server such as imageshack , it doesn't automatically resize them to thumbnail size (the one showing the images of the gallery when you click on "pictures") , so i should do so !!!
gonna try it and tell you what happened !!! thnx a lot !!!
edit : there's another problem when putting the gallery in a block (size 160x160) : the arrows for moving to next/previous photo and the preview window that opens when you click on "pictures" maintain their size (meant for the 460x345 gallery) !!! is there a way to make those two appear smaller ?
The only thing i can think off is to open the images of the arrows in an image editor and resize them as well. Don't know if it will work but you can try. :)
Hmmm... i don't use any scripts on my website except for...
Tabs content, F1 Menu Popout, and google ads.
Brianjw
thnx , gonna try it out !!!
can anyone post a link to their site as a demo of this?
Quote from: vdubbia on March 14, 2007, 11:14:51 PM
can anyone post a link to their site as a demo of this?
It's not mine but its the person who has it looking good on their website...
http://www.fcbzone.com
at the first center block is the demo :)