Autor Tema: Tutorial para agregar un slider simple a tu foro  (Leído 174 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Conectado Rock Lee

  • Administrador
  • *
  • Mensajes: 809
  • Sexo: Masculino
  • ar
  • Digitalizando tu Mundo
    • Ver Perfil
    • La nueva era del conocimiento
Tutorial para agregar un slider simple a tu foro
« el: 19 abril de 2018, 09:33 am »
Es una adaptación que hice hace un tiempo guiándome medianamente por los archivos de SMF, es algo simple y no muy complicado de aplicarlo, lo malo hay que agregar manualmente cada nueva imagen y es fijo aun navegando por el foro... empezamos:

En este caso yo lo agregue al archivo script de SMF aunque también puede tomarse por separado solo hay que saber donde lo colocamos y como lo llamamos para usarlo luego... buscamos en ../Themes/default/scripts/script.js

Código: [Seleccionar]
document.getElementById(idElement).type = 'input';
document.getElementById(idElement).type = 'file';
}
}

para luego agregar:

Código: [Seleccionar]
// Where we define the values of slider images.

var a = jQuery.noConflict();
        a(document).ready(function() {
        a('#Slider').infiniteSlider({
           imagePath: '',
           transitionSpeed: 42000,
           displayTime: 0,
           thumbnailType: 'none',
           customClass: 'Slider',
           easeLeft: 'linear',
           easeRight:'linear',
           inView: 1,
           advance: 1,
           autoPilot: true,
           displayProgressRing: false,
           showControls: false,
           prevNextInternal: false
});
});

Bueno no hay mucho explicar las variables dicen casi todo pero vamos a definir un poco para quienes quieren editar por ejemplo la velocidad debemos cambiar el valor en transitionSpeed al que nos parezca mejor... Al bajarlo (2000) aumentamos la velocidad de despliegue de la siguiente imagen ahora si aumentamos (420000) el valor este ira mas lento.

ahora pasamos a editar el index.css del theme que estamos aplicando este slider en este caso lo voy aplicar al theme default por lo cual al final agregamos:

Código: [Seleccionar]
/* Style Slider
------------------------------------------------------- */
div.ic_Slider
{
margin: auto;
margin-bottom: 10px;
clear:right;
}

.infiniteSlider {
box-shadow: 0px 5px 5px rgb(0,0,0); /* Esto es le da sombra tenue a la imagen el cual tambien es editable a gusto incluso pueden agregar algo mas si saben algo de CSS3 */
}
border: 3px double rgb(255,225,255); /* Aca podemos darle formas a las lineas que hacen el contorno de imagenes solo es probar algunos valores */
}

.left_nav, .right_nav {
display: none;
}

Bien falta solo tocar el index.template.php del theme que estas usando en caso no tenga usas el default que debe funcionar sin problemas. Buscamos la linea [esto lo ubicara en la parte arriba de donde empiezan los foros si quieres ubicarlo otro lado es solo ubicarlo donde quieras]

Código: [Seleccionar]
// Show the navigation tree.
theme_linktree();

abajo agregamos:

Código: [Seleccionar]
// Show the image slider.
echo '
<ul id="Slider">
  <li><img width="700" height="100" src="', $context['theme_variant_url'], 'slider', '/', 'imagen1.png" /></li>
  <li><img width="700" height="100" src="', $context['theme_variant_url'], 'slider', '/', 'imagen2.png" /></li>
  <li><img width="700" height="100" src="', $context['theme_variant_url'], 'slider', '/', 'imagen3.png" /></li>
</ul>';

Explicando un poco esto básicamente agrego la imagen deseo en la carpeta slider [o si quieren nombrarlo de otra manera solo recuerden ponerla en resto del código el mismo nombre para no generar problemas] que debemos poner en la raiz de smf, por ejemplo www.midominio.com/slider/ si tenemos el foro dentro de una carpeta debemos simplemente crear la carpeta y quedara www.midominio.com/miforo/slider/

Ahora si quieren cambiar algún parámetro ya sea ancho o algo de la imagen solo deben tocar los valores "width" (ancho) y height (alto) para adaptarlo a lo que necesiten yo use esos valores para hacerlo algo equilibrada solo con 3 imágenes... ahora si lo que desean agregar otra imagen solo deben poner "<li><img width="700" height="100" src="', $context['theme_variant_url'], 'slider', '/', 'imagen3.png" /></li>" al final del ultimo </li> recordando que poner entre comillas donde dice "imagen1.png" deben poner el nombre de la imagen con la extensión tenga para que aparezca correctamente.

Por ultimo, es agregar en el mismo archivo justo antes de:
Código: [Seleccionar]
echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />

debemos agregar estas 4 lineas:
Código: [Seleccionar]
echo '
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://www.bombercode.net/js/jquery.infiniteSlider.js"></script>
<script type="text/javascript" src="http://www.bombercode.net/js/easing.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin1413"></script>';

Con esto ya debe estar totalmente cubierto el tema de editar algunos archivos para poder agregar este slider ahora solo queda subir 4 archivos en su hosting para este totalmente operacional [Mas abajo ajuntare y dejare un enlace de descarga] ... Como ven en este ejemplo los 2 archivos js uno llamado "easing.js" no hay mucho que editar y "jquery.infiniteSlider.js" que debemos editar 2 lineas donde es donde muestra los botones tiene el slider:

buscamos:
Código: [Seleccionar]
http://www.bombercode.net/js/left.png
http://www.bombercode.net/js/right.png

Son fácilmente localizables en esta debemos editar para apuntar a donde tengamos la imagen que deseamos que aparezca, en este caso yo he puesto 2 botones .png tenia desde antes muy lindos » « a mi criterio el cual también dejo adjunto.

Genial :D con todos estos paso debería estar totalmente terminado (veo si puedo editarlo solo aparezca en ciertas formas y lo agrego ;D) y verlo mas o menos de esta manera:



Saludos Familia!

PD: Dejo adjuntado los archivos necesarios, sino pueden ver el MOD ya empaquetado!