Slider TinyFader2
Bueno como tener un slider en su foro o web es muy simple el tutorial. ------------------- 1) Descargar los Archivos del Slider http://www.scrip...

Bueno como tener un slider en su foro o web es muy simple el tutorial.
[Imagen: QMiisvL.jpg]
-------------------
1) Descargar los Archivos del Slider
http://www.scriptiny.com/?wpdmdl=3& (Link de Descarga)

Al tener descargado nos encontraremos 3 Archivos
Carpeta TinyFader = 2 Scripts y los CSS
Photos = Que ai estan las imagenes
Index = el HTML

2) Pasar los archivos correctamente a la FTP para su Foro
Carpeta TinyFader = Los dos JS van en jsscripts y El CSS no lo pasamo.
Photos = Images>Carpeta del theme que esten usando.

Al tener ya puesto los JS y las imagenes ya podemos ir poniendo el slider.

3) Agarramos el Archivo Fader.CSS lo abrimos con el bloc de notas y copiamos los CSS y los ponemos en Global CSS segun el theme que esten usando, igual dejo los CSS aca.
Código PHP:
* {margin:0padding:0}
body {font:12px Verdana,Arialcolor:#555; background:#222}
{line-height:1.4margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}

.slider-button {float:leftwidth:32pxcursor:pointerfont-size:30pxheight:32pxline-height:26pxmargin-top:134pxtext-align:centercolor:#888; background:#fff}
.slider-button:hover {color:#222}

.pagination {float:left; list-style:noneheight:23pxmargin:15px 0 0 32pxdisplay:none}
.
pagination li {float:leftcursor:pointerheight:12pxwidth:12pxbackground:#666; border-radius:6px; margin-right:4px}
.pagination li:hover {background:#777; color:#000}
li.current {background:#888}

/* TinyFader */

#slideshow {float:left; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slides {position:relative; width:500px; height:300px; list-style:none; overflow:auto}
#slides li {width:500px; height:300px}
.fader-slide {opacity:0position:absolute}
.
fader-fade {opacity:1; -webkit-transition:opacity .4s; -moz-transition:opacity .4stransition:opacity .4s}

/* Slide Styling */

#content {width:464px; height:270px; padding:15px 18px 15px 18px; background:#fff}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

#caption {background:#fff; position:relative}
#caption div {position:absolute; bottom:0; left:0; width:464px; padding:15px 18px 10px 18px; background:#000; background:rgba(0,0,0,.7)}
#caption h2 {font:18px Georgia,Verdana; margin-bottom:6px; color:#eee}
#caption p {line-height:1.4; color:#aaa} 

4) Colocar el HTML, abrimos con el bloc de notas el archivo que se llama index y ese es nuestro HTML para poner el Slider donde quieras por lo Comun se usa el Slider en el Index del foro
Código PHP:
<!DOCTYPE html>
<
head>
<
script src="tinyfader/fader.js"></script>
</
head>
<
div id="wrapper">
    <
div>
        <
div class="slider-button" onclick="ss.move(-1)">&laquo;</div>
        <
div id="slideshow">
            <
ul id="slides">
                <
li>
                    <
div id="content">
                        <
h1>TinyFader 2 Slideshow wCSS3 Transitions</h1>
                        <
p>This 2KB JavaScript slider code is completely configurable through the robust option setIt is an upgrade to the previous TinyFader version adding a number of requested features and making additional improvementsIt gracefully degrades without JavaScript support and is totally customizable using CSS.</p>
                        <
p><em>For complete details visit <a href="http://www.scriptiny.com/tinyfader">scriptiny.com</a>.</em></p>
                    </
div>
                </
li>
                <
li>
                    <
div id="caption">
                        <
img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle">
                        <
div>
                            <
h2>Caption Title</h2>
                            <
p>Lorem ipsum dolor sit ametconsectetur adipiscing elitSuspendisse eu tincidunt leo.</p>
                        </
div>
                    </
div>
                </
li>
                <
li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef"></li>
                <
li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish"></li>
            </
ul>
        </
div>
        <
div class="slider-button" onclick="ss.move(1)">&raquo;</div>
    </
div>
    <
ol id="pagination" class="pagination">
        <
li></li>
        <
li></li>
        <
li></li>
        <
li></li>
    </
ol>
</
div>
<
script>
var 
ss = new TINY.fader.init('ss', {
    
id'slides',
    
auto4,
    
resumetrue,
    
navid'pagination',
    
navEvent'mouseover',
    
activeClass'current',
    
pauseHovertrue
});
</
script

5) Recuerden poner las rutas bien de los JS si no, no les andara el Slider
Código PHP:
<script src="{$mybb->settings['bburl']}/jscripts/fader.js"></script

Tambien lo tienen que poner si van a poner el slider en el index adentro de los <head> </head>

6) Tenemos nuestro Slider, quiero aclarar que capaz tengan conflictos con los CSS segun el theme que usen y se tienen que fijar como arreglarlo ya que es CSS.

Aca un Demo que tengo puesto en mi Foro
http://sandbox.scriptiny.com/tinyfader2/
Un poco editado, ya que ahora mas tarde lo voy a seguir editando.

Creditos:
http://www.scriptiny.com/2012/08/javascr...code-css3/
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Última modificación: 2 Mar, 2013, 1:51 pm por fabiibiografiia.
Gracias por el tuto, +Rep.