TinyPortal

Development => Block Codes => Topic started by: spurry on April 14, 2008, 02:39:25 PM

Title: SmoothGallery 2.0 timed gallery
Post by: spurry on April 14, 2008, 02:39:25 PM
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>

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

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


Title: Re: SmoothGallery 2.0 timed gallery
Post by: Jpg on April 14, 2008, 03:28:30 PM
You stole this tutorial from Dzinerstudio.
Thanks for posting the original link.

http://www.dzinerstudio.com/index.php?topic=146.0
Title: Re: SmoothGallery 2.0 timed gallery
Post by: spurry on April 14, 2008, 04:18:52 PM
Quote from: Jpgâ,,¢ on April 14, 2008, 03:28:30 PM
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
Quotethis 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
Title: Re: SmoothGallery 2.0 timed gallery
Post by: FERNSIDEâ„¢ on April 20, 2008, 06:42:54 AM
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
Title: Re: SmoothGallery 2.0 timed gallery
Post by: spurry on April 20, 2008, 09:42:56 AM
did you follow
Step 3: Open your themes index.template file and add these lines just before </head>

<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" />
Title: Re: SmoothGallery 2.0 timed gallery
Post by: FERNSIDEâ„¢ on April 20, 2008, 09:56:15 AM
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!! (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fwww.postsmile.net%2Fimg%2F19%2F1942.gif&hash=018d7ac4eb395efbb2008a3b65d85b3d0f827bd5)
Title: Re: SmoothGallery 2.0 timed gallery
Post by: Crip on April 20, 2008, 12:29:02 PM
Hoping the original install / use instructions are included in the download zip, the above is a tad bit confusing to me anyway
Title: Re: SmoothGallery 2.0 timed gallery
Post by: spurry on April 20, 2008, 01:39:28 PM
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
Title: Re: SmoothGallery 2.0 timed gallery
Post by: Cholo on February 20, 2009, 06:02:42 AM
I know this is a little old... but these same instructions apply to any html page as well right?