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.
* {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)">&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
<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.
Archivos Adjuntos

Gracias por el tuto, +Rep.
Colaboradores
Bewan
This forum uses Lukasz Tkacz MyBB addons.