JonDesign's SmoothGallery

[whoesa]

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.

How to use this:
1. Download the script Here

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:

Code Select Expand

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

Code Select Expand

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

Code Select Expand

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


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.

To use another option, just replace this code:

Code Select Expand

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 8000,
showArrows: false,
showCarousel: false
});
}
window.onDomReady(startGallery);
</script>

Cheers.

[brianjw]

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

-----

Ok i got it setup. But the text isnt showing up on the picture

Code (I am using...) Select Expand


<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

[MinasC]

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 !!!

[whoesa]

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?

[whoesa]

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?

Code Select Expand

#myGallery
{
width: 460px;
height: 345px;
z-index:5;
display: none;
border: 1px solid #000;
}

[MinasC]

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 ?

[brianjw]

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

[whoesa]

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.

[MinasC]

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 ?

[whoesa]

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.