Name of Snippet
: Simple Sliding Banners/ImagesSMF/TP versions tested:
: SMF2 RC3/TinyPortal 1.0 beta 5.2 and SMF 1.1.11/TinyPortal v1.0.5 beta 1Block Type:
: Freddy in parts Link to Discussion
: http://www.tinyportal.net/index.php?topic=33180Other Requirements
: Mootools library (included in attachment)Description
Please read my note regarding mootools at the bottom.
At this time of writing I have this on my site here : http://aidreams.co.uk/forum/index.php
Things you need to do :
Download the attached zip file and extract - open up sliderBlockCode.html
in a browser to see what it does.
Decide on a size for your rotating images or banners.
Make your images, note the sizes (they need to match).
Replace the example banners, or add more etc.
Now you have to change some of the code....
The first easy bit is to look at the style sheet (stylesheet/slider.css) :
It's fairly obviouse you need to change these four parts marked with arrows below to match your image sizes :
margin:0px auto 0px;
border:1px #CCCCCC solid;
width:660px ; <---
height:200px ; <---
margin:0px auto 0px;
That's it for the CSS
Each banner needs to be specified like so :
<a class="banner" href="http://mydomain/mylink" target="_blank"><img src="SlidingBanner/banners/banner1.jpg" width="660" height="200" /></a>
So just edit the ones there or add new ones accordinlgy to match the names/order of your new banners/images.
The href is optional really, it just allows people to click the image and be sent to some page. You could set that to href="#" if you don't want that to happen. Don't forget to change the width and height there to match your images. Remove 'target="_blank"' if you don't want it to open in a new window.
Test out the slider like I mentioned above. If that's all working you can start moving it online...
Upload the whole folder named 'SlidingBanner
' to the root of your forum (you don't need to upload sliderBlockCode.html really, but you might find it useful for testing purposes). In other words the 'SlidingBanner' folder needs to be in the same directory as the Packages, Sources and Themes folders etc. There are blank index.php files in each folder to stop people snooping around in your directories.
Now you have your slider online all you need to do is copy and paste the whole of the code you were working on in sliderBlockCode.html
If you get problems then you could try making sure there is only one version of mootools.js being used. Usually I remove the TP version of mootools as it only seems to be used with the scrolling shout box which I do not use. If you don't want to do that then you could try removing the reference to mootoools in this code, meaning this line :