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.
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
5) Recuerden poner las rutas bien de los JS si no, no les andara el Slider
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: 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.
* {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
<!DOCTYPE html>
<head>
<script src="tinyfader/fader.js"></script>
</head>
<div id="wrapper">
<div>
<div class="slider-button" onclick="ss.move(-1)">«</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)">»</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
<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: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]](https://31.media.tumblr.com/b9f3b87cfcc886d53d07cd3fe8e67a24/tumblr_nj9sv13aff1tga1sco4_r1_500.gif)
