Agregar un Slider simple a tu foro por RockLee

[-Rock Lee-]

Es una adaptación que hice hace un tiempo guiándome medianamente por los archivos de SMF es algo simple y no muy complicado lo malo hay que agregar manualmente cada nueva imagen y es fijo aun navegando por el foro aunque veo si hago pruebas para poder solo agregarlo a los foros, que he visto no es complejo... 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

Code Select Expand

document.getElementById(idElement).type = 'input';
document.getElementById(idElement).type = 'file';
}
}

para luego agregar:

Code Select Expand

// 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:

Code Select Expand

/* 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]

Code Select Expand

// Show the navigation tree.
theme_linktree();

abajo agregamos:

Code Select Expand

// 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:

Code Select Expand

echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />

debemos agregar estas 4 lineas:

Code Select Expand


echo '
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://www.bombercode.org/js/jquery.infiniteSlider.js"></script>
<script type="text/javascript" src="http://www.bombercode.org/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:

Code Select Expand

http://www.bombercode.org/js/left.png
http://www.bombercode.org/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 con todos estos paso debería estar totalmente terminado (veo si puedo editarlo solo aparezca en ciertas formas y lo agrego ) y verlo mas o menos de esta manera:

Acá dejo el link en zippyshare que es el que mas cerca me quedaba hahaha espero les agrade y cualquier duda/consejo es bienvenido! ademas dejo análisis de AV por si la dudas


SHA256:   e985d436a155ada8a6042ce07e7ff589fe63eeba0c8086f664b25b6ac6190919
Nombre:   SliderByRockLee.zip
Detecciones:   0 / 56
Fecha de análisis:   2016-05-23 15:44:14 UTC ( hace 8 minutos )


Saludos!

PD: No pensé ahora tardaba tanto AV x)

[ZabiinoOo]

Graciaaaaaaaaas, sos un crack excelente guia, me sirvio de mucho la verdad, ahora una cosa en el index no se puede posicionar que quede debajo de temas recientes en mi foro: http://tuservermu.com.ve/ Que quede ahi donde esta la otra publicidad para quitar esa que esta y dejar solo este ahi y arriba en los temas y listo, si me podrias decir hermano encantado, y otra cosa seria poner que cada imagen le pueda colocar una url osea un link por imagen de eso se trata la publicidad no? jaja saludos

[-Rock Lee-]

Graciaaaaaaaaas, sos un crack excelente guia, me sirvio de mucho la verdad, ahora una cosa en el index no se puede posicionar que quede debajo de temas recientes en mi foro: http://tuservermu.com.ve/ Que quede ahi donde esta la otra publicidad para quitar esa que esta y dejar solo este ahi y arriba en los temas y listo, si me podrias decir hermano encantado, y otra cosa seria poner que cada imagen le pueda colocar una url osea un link por imagen de eso se trata la publicidad no? jaja saludos

Me da gusto te sirva bien no lo he probado con la modificación estas usando pero debería funcionar... Bien debes eliminar del index.template.php:

Code Select Expand

// 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>';

Ahora buscas en el archivo BoardIndex.template.php:

Code Select Expand

echo '
<div id="boardindex_table">
<table class="table_list">';

para dejarlo de la siguiente manera:

Code Select Expand

<div id="boardindex_table">
<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>
<table class="table_list">';

Con esto debemos cubrir el primer punto ahora para agregar un link a la imagen debes dejarlo:

Code Select Expand

<li><a href="http://www.simplemachines.org/" alt="Simplemachines" title="SMF"><img width="700" height="100" src="', $context['theme_variant_url'], 'slider', '/', 'imagen1.png" /></a></li>

con estos ajustes deberías tener lo que quieres igualmente recuerda hacer backups y cualquier cosa comenta


Saludos!

[ZabiinoOo]

y si no tengo BoardIndex.template.php en mi theme que uso como hago?

[-Rock Lee-]

y si no tengo BoardIndex.template.php en mi theme que uso como hago?

Cuando no encuentres algún archivo en tu theme usa el del default y debería funcionar sin problemas la modificación...


Saludos!

[ZabiinoOo]

Me puso el theme en blanco con la edicion del BoardIndex.template.php tengo que reemplazar esto echo '
   <div id="boardindex_table">
      <table class="table_list">';

por lo otro? o colocarlo debajo o como? porque lo hice  de esas formas y igual me larga el mismo error, lo puse debajo de echo, reemplaze desde echo, lo puse debajo de table class y nada

[-Rock Lee-]

Me puso el theme en blanco con la edicion del BoardIndex.template.php tengo que reemplazar esto echo '
   <div id="boardindex_table">
      <table class="table_list">';

por lo otro? o colocarlo debajo o como? porque lo hice  de esas formas y igual me larga el mismo error, lo puse debajo de echo, reemplaze desde echo, lo puse debajo de table class y nada

No es remplazar sino agregarlo, yo lo coloque antes agregando otro echo para ubicarlo mas rápido pero se puede poner en otro lugar aunque debes recordar si lo pones dentro de otro "echo" debes borrar la primer y ultima linea del código para no entre en conflicto. Yo al mirar lo deje de la siguiente manera:

Code Select Expand

// Show the image slider.
echo '
<ul id="Slider">
  <li><a  href="http://www.simplemachines.org/" alt="Simplemachines" title="SMF"><img width="700" height="100" src="', $context['theme_variant_url'], 'slider', '/', 'imagen1.png" /></a></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>';

echo '
<div id="boardindex_table">
<table class="table_list">';

Y deberías verlo »De esta manera« ...


Saludos!

[Kazuo]

Zipishare elimino el archivo de sus servidores
alguien que lo tenga y lo pueda compartir
se agradeceria. saludos.

[-Rock Lee-]

Zipishare elimino el archivo de sus servidores
alguien que lo tenga y lo pueda compartir
se agradeceria. saludos.

Los archivos aun están adjuntos ¿no te sirven? ... acá dejo subido a ZippyShare de nuevo aunque ya estoy tratando de volver, investigare mejor donde subirlo para duren mas los enlaces, a la normalidad con todo lo de smf!


Saludos!

[ruby12]

hola rock lee muy buenos todos tus temas tanto de soporte como de guias, bueno yo tengo mi foro armado en su mayoria viendo todos los temas de soporte de este foro.
quiero agregar el slider de la forma en la que describes en tu post pero los archivos adjuntos no estan disponibles mas. me gustaria que compartieras dichos archivos para poder terminar los sliders, un saludo

[-Rock Lee-]

hola rock lee muy buenos todos tus temas tanto de soporte como de guias, bueno yo tengo mi foro armado en su mayoria viendo todos los temas de soporte de este foro.
quiero agregar el slider de la forma en la que describes en tu post pero los archivos adjuntos no estan disponibles mas. me gustaria que compartieras dichos archivos para poder terminar los sliders, un saludo

¿No te deja bajar los adjuntos del primer tema? igualmente te dejo un enlace de => MEGA


Saludos!