SmoothGallery 2.0 timed gallery

[spurry]

smoothgallery timed gallery ok i added this to my forum and was asked to post how so here goes
(all credit goes to Dzinerstudio for making this posibill for me to do, i just removed a few thing to suit me)

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website...


Here a few steps to get the "timed" gallery working inside TP/SMF:

Step 1: Download the SmoothGallery here http://smoothgallery.jondesign.net/

Step 2: Unzip and upload folder to your root. I renamed the folder to just SmoothGallery

Step 3: Open your themes index.template file and add these lines just before </head>

Code Select Expand

<script src="SmoothGallery/scripts/mootools.v1.11.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" />

Step 4: In a new script block and insert all this code:

Code Select Expand

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: true,
showInfopane: true,
showCarousel: false,
embedLinks: true,
delay: 5000
});
}
window.addEvent('domready', startGallery);
</script>
<center>
<div id="myGallery" align="center">
<div class="imageElement">
<h3>your title</h3>
<p>your words</p>
<a href="http://www.yourforum.com" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/1.jpg" class="full" />
</div>
<div class="imageElement">
<h3>your title</h3>
<p>your words</p>
<a href="http://www.yourforum.com" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/2.jpg" class="full" />
</div>
<div class="imageElement">
<h3>your title</h3>
<p>your words</p>
<a href="http://www.yourforum.com" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/3.jpg" class="full" />
</div>
<div class="imageElement">
<h3>your title</h3>
<p>your words</p>
<a href="http://www.yourforum.com" title="open image" class="open"></a>
<img src="SmoothGallery/images/brugges2006/4.jpg" class="full" />
</div>
</div>
</center>


Step 5:  Edit the image titles, descriptions, links, etc...

Final step: Set the gallery size in SmoothGallery/css/jd.gallery

Code Select Expand

#myGallery, #myGallerySet, #flickrGallery
{
width: 460px;
height: 345px;
z-index:5;
border: 1px solid #000;
}

thats it have fun this is not my work so i carnt take the thanks for it you can find out more here http://smoothgallery.jondesign.net/showcase/gallery/ as this cool little thing dose lots more

[Jpg]

You stole this tutorial from Dzinerstudio.
Thanks for posting the original link.

http://www.dzinerstudio.com/index.php?topic=146.0

[spurry]

You stole this tutorial from Dzinerstudio.
Thanks for posting the original link.

http://www.dzinerstudio.com/index.php?topic=146.0

i stole nothing yes i followed it from Dzinerstudio and changed 1 or 2 things to soot me
may be if you read the post you may have seen this

this is not my work so i carnt take the thanks for it

and as some one requested it from here http://www.tinyportal.net/index.php?topic=22809.msg188709#msg188709
i posted it

i allso dont remember  posting the original link and no way take credit for it as said before

the full tut is here http://smoothgallery.jondesign.net/getting-started/ just modify it to your needs

[FERNSIDEâ„¢]

Thanks spurry.

Sorry I havent replied, I got a new addition on the way, so have been a little occupied

The images arent showing in the slide, rather one after(below) the other.
Any ideas buddy?

Thanks

[spurry]

did you follow
Step 3: Open your themes index.template file and add these lines just before </head>

Code Select Expand

<script src="SmoothGallery/scripts/mootools.v1.11.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" />

[FERNSIDEâ„¢]

DOH!!

Sorry bro.  A little tired, and just saw I had it in the body LOL

Cheers mate.
Thanks for this buddy, it works perfect!!

[Crip]

Hoping the original install / use instructions are included in the download zip, the above is a tad bit confusing to me anyway

[spurry]

this is from the original host site
http://smoothgallery.jondesign.net/getting-started/

the above is adapted by the clever people at Dzinerstudio to work on a tp/smf forum,

i am no coder my self and followed the few easy steps and have it workinghope this helps you

[Cholo]

I know this is a little old... but these same instructions apply to any html page as well right?