TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 10:40:25 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,106
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 100
  • Total: 100

[Block] Simple Sliding Banners/Images

Started by Freddy, September 06, 2010, 06:47:47 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Freddy

Name of Snippet: Simple Sliding Banners/Images
SMF/TP versions tested:: SMF2 RC3/TinyPortal 1.0 beta 5.2 and SMF 1.1.11/TinyPortal v1.0.5 beta 1
Block Type: html & javascript
Author: Freddy in parts
Link to Discussion: http://www.tinyportal.net/index.php?topic=33180
Other Requirements: Mootools library (included in attachment)
Description: A simple way to slide images around using javascript.  Suitable for fixed and matching sized images.


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

First of all this is where the javascript came from and it will also tell you things that you can do with the script better than I can, so refer to that for modifications :

http://www.php-help.ro/mootools-12-javascript-examples/slideitmoo-v11-image-slider/

There is a demo page, basically I used Demo 2 there for my own ends.  This is what this package is based on.  Full credit to the original author of the javascript code...


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 :


#SlideItMoo_banners_outer {
display:block;
position:relative;
width:660px; <----
height:200px; <---
margin:0px auto 0px;
border:1px #CCCCCC solid;
}
#SlideItMoo_banners_inner {
position:relative ;
overflow:hidden ;
width:660px ; <---
height:200px ; <---
margin:0px auto 0px; 
}


That's it for the CSS :)

Now for the HTML/Javascript.  You can test your code by opening up the included sliderBlockCode.html in your browser again.  A handy way to see if it is actually working before you go live.  The code in that HTML file is also what you should place in a TP HTML/Javascript block, but first you will need to change it a little :

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 into an HTML/Javascript block.

With a bit of luck you should now see some nice sliding images.   Have a play with the javascript settings as per that original link I gave above and you are good to go !

A word of warning - this block uses the mootools javascript library, which may or may not already be included in your TP installation.

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 :

<script language="javascript" type="text/javascript" src="SlidingBanner/script/mootools-1.2.1-core.js"></script>