Slider TinyFader2

Finer 2 Mar, 2013, 1:36 pm

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

* {margin:0; padding:0}

body {font:12px Verdana,Arial; color:#555; background:#222}

p {line-height:1.4; margin-bottom:12px}

#wrapper {width:578px; margin:75px auto}

.slider-button {float:left; width:32px; cursor:pointer; font-size:30px; height:32px; line-height:26px; margin-top:134px; text-align:center; color:#888; background:#fff}

.slider-button:hover {color:#222}

.pagination {float:left; list-style:none; height:23px; margin:15px 0 0 32px; display:none}

.pagination li {float:left; cursor:pointer; height:12px; width:12px; background:#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:0; position:absolute}

.fader-fade {opacity:1; -webkit-transition:opacity .4s; -moz-transition:opacity .4s; transition: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:
<?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 w/ CSS3 Transitions</h1>

                        <p>This 2KB JavaScript slider code is completely configurable through the robust option set. It is an upgrade to the previous TinyFader version adding a number of requested features and making additional improvements. It 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 amet, consectetur adipiscing elit. Suspendisse 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',

    auto: 4,

    resume: true,

    navid: 'pagination',

    navEvent: 'mouseover',

    activeClass: 'current',

    pauseHover: true

});

</script>

5) Recuerden poner las rutas bien de los JS si no, no les andara el Slider

Código PHP:
<?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/

Última modificación: 2 Mar, 2013, 1:51 pm por fabiibiografiia.

[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]

Slider TinyFader2

Finer 2 Mar, 2013, 1:36 pm

Bewan 2 Mar, 2013, 3:16 pm