News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[Tutorial]Slide jQuery en bbcode | ImageFlow

Started by MorderBR, December 11, 2012, 05:39:16 PM

Previous topic - Next topic

MorderBR

Hola, primer aporte en esta comunidad   :D

Como dice el titulo, les mostrare como meter un slide jQuery en un bbcode
Aquí un ejemplo:



Ahora el codigo

Abren el Index.template.php de su theme y en el header colocan lo siguiente:

Encontrar:

// Here comes the JavaScript bits!
echo '



Colocar después:

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="/flow/imageflow.packed.css" type="text/css" />
<script type="text/javascript" src="/flow/imageflow.js"></script>


NOTA: Si ya tienen la librería Jquery en su index, no lo vuelvan a colocar o "chocaran" los scripts.


../Sources/Subs.php

Encontrar:

array(
'tag' => 'table',
'before' => '<table class="bbc_table">',
'after' => '</table>',
'trim' => 'inside',
'require_children' => array('tr'),
'block_level' => true,
),


Colocar después:

//slide1
array(
'tag' => 'slide1',
'before' => '<div id="imagenes_noticia1" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide2
array(
'tag' => 'slide2',
'before' => '<div id="imagenes_noticia2" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide3
array(
'tag' => 'slide3',
'before' => '<div id="imagenes_noticia3" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide4
array(
'tag' => 'slide4',
'before' => '<div id="imagenes_noticia4" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide5
array(
'tag' => 'slide5',
'before' => '<div id="imagenes_noticia5" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide6
array(
'tag' => 'slide6',
'before' => '<div id="imagenes_noticia6" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide7
array(
'tag' => 'slide7',
'before' => '<div id="imagenes_noticia7" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide8
array(
'tag' => 'slide8',
'before' => '<div id="imagenes_noticia8" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide9
array(
'tag' => 'slide9',
'before' => '<div id="imagenes_noticia9" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//slide10
array(
'tag' => 'slide10',
'before' => '<div id="imagenes_noticia10" class="imageflow"><a href="#" class="highslide" onclick="return hs.expand(this)"></a>',
'after' => '</div>',
'trim' => 'inside',
'block_level' => true,
),
//imagen de slide
array(
'tag' => 'islide',
'type' => 'unparsed_content',
'content' => '<img src="$1" longdesc="$1"/>',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),
'disabled_content' => '($1)',
'trim' => 'both',
'block_level' => true,
),
//end slide


../Sources/Subs-Editor.php
Encontrar:

array(
'image' => 'table',
'code' => 'table',
'before' => '[table]\n[tr]\n[td]',
'after' => '[/td]\n[/tr]\n[/table]',
'description' => $txt['table']
),


Colocar despues:

array(),
//slide1
array(
'image' => 'img',
'code' => 'slide1',
'before' => '[center]\n[slide1]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide1]\n[/center]',
'description' => $txt['slide']
),
//slide2
array(
'image' => 'img',
'code' => 'slide2',
'before' => '[center]\n[slide2]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide2]\n[/center]',
'description' => $txt['slide']
),
//slide3
array(
'image' => 'img',
'code' => 'slide3',
'before' => '[center]\n[slide3]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide3]\n[/center]',
'description' => $txt['slide']
),
//slide4
array(
'image' => 'img',
'code' => 'slide4',
'before' => '[center]\n[slide4]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide4]\n[/center]',
'description' => $txt['slide']
),
//slide5
array(
'image' => 'img',
'code' => 'slide5',
'before' => '[center]\n[slide5]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide5]\n[/center]',
'description' => $txt['slide']
),
//slide6
array(
'image' => 'img',
'code' => 'slide6',
'before' => '[center]\n[slide6]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide6]\n[/center]',
'description' => $txt['slide']
),
//slide7
array(
'image' => 'img',
'code' => 'slide7',
'before' => '[center]\n[slide7]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide7]\n[/center]',
'description' => $txt['slide']
),
//slide8
array(
'image' => 'img',
'code' => 'slide8',
'before' => '[center]\n[slide8]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide8]\n[/center]',
'description' => $txt['slide']
),
//slide9
array(
'image' => 'img',
'code' => 'slide9',
'before' => '[center]\n[slide9]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide9]\n[/center]',
'description' => $txt['slide']
),
//slide10
array(
'image' => 'img',
'code' => 'slide10',
'before' => '[center]\n[slide10]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide10]\n[/center]',
'description' => $txt['slide']
),
array(
'image' => 'img',
'code' => 'islide',
'before' => '[islide]',
'after' => '[/islide]',
'description' => $txt['imgslide']
),
//endslide



Meter la carpeta flow dentro de su root

Y bueno, se preguntarán ¿Por qué meter tantos slides en el código?
Verán, este script se compone por 10 slides incluidos dentro de él, cada uno con cierto ID, claro se pueden quitar o agregar más, solo tendrían que cambiar el ID del slide.
Este slide, solo puede "correr" un slide con cierto ID por pagina, no se puede repetir, así que, por ejemplo: si quieren poner el slide con ID 1 dos veces en la misma pagina, solo se verá uno, el otro se verá en blanco, habría que cambiarle el ID por otro para que la pagina pueda "correr" varios slides al mismo tiempo.

Para mí, esta fue la manera mas útil de usar todos los ID's del slide ya que la pagina en donde estoy, se utilizan mucho las publicaciones de imágenes en una sola pagina.

El slide lo codifique para que solo aparezcan tres imágenes, si quieren agregar mas imágenes solo tienen que agregarlas con el ultimo botón que genera el código [islide]URL[/islide]
o bien, agregarlo directo en el codigo:
Default

//slide1
array(
'image' => 'img',
'code' => 'slide1',
'before' => '[center]\n[slide1]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide1]\n[/center]',
'description' => $txt['slide']
),


Agregando más imágenes en el código
en la variable before o after agregar:

\n[islide]URL imagen[/islide]


En cuanto al zoom en la imagen, requiere de otro plug jQuery llamado highslide
Pagina oficial

Eso sería todo, no duden en preguntar lo que quieran.


Creditos:
Support:    http://finnrudolph.de/ImageFlow

License:    ImageFlow is licensed under a Creative Commons
            Attribution-Noncommercial 3.0 Unported License
            (http://creativecommons.org/licenses/by-nc/3.0/).

            You are free:
                + to Share - to copy, distribute and transmit the work
                + to Remix - to adapt the work

            Under the following conditions:
                + Attribution. You must attribute the work in the manner specified by the author or licensor
                  (but not in any way that suggests that they endorse you or your use of the work).
                + Noncommercial. You may not use this work for commercial purposes.

            + For any reuse or distribution, you must make clear to others the license terms of this work.
            + Any of the above conditions can be waived if you get permission from the copyright holder.
            + Nothing in this license impairs or restricts the author's moral rights.

4Kstore

Excelente tu tutorial, muy bien explicado!
No lo puedo probar porque no estoy en mi PC pero cualquier usuario que tenga alguna duda o sugerencia avise.
Gracias por compartir lo muevo a la sección tutoriales.
Saludos

¡¡NEW MOD: Sparkles User Names!!!

^HeRaCLeS^

Te felicito!! Me parecio muy interesante y original esto.

Me gustaria darte una idea con el tema de las id que mencionabas. Vos pusiste el codigo varias veces porque como dijiste no se puede repetir el id, eso en verdad no es solo de este jquery, sino que los id nunca se pueden repetir.
Ahora en lugar de poner tantas veces el codigo y con distintas id, lo que yo haria seria ponerlo una sola ves y que el id fuera con un numero aleatorio, entonces le pondrias id="imagenes_noticia_numeroaleatorio" que podria ser de 0 a 999, de esa forma te aseguras que no se repita el id y solo estas usando un solo codigo.

Esto es solo una idea para mejorar un poco el trabajo, pero como dije te felicito por el mismo ;)
^HeRaCLeS^
*¤×• Ni te molestes en enviarme un Mp porque el soporte lo doy solo por el foro •×¤*


SMFPersonal

MorderBR

Quote from: ^HeRaCLeS^ on December 14, 2012, 08:33:45 PM
Te felicito!! Me parecio muy interesante y original esto.

Me gustaria darte una idea con el tema de las id que mencionabas. Vos pusiste el codigo varias veces porque como dijiste no se puede repetir el id, eso en verdad no es solo de este jquery, sino que los id nunca se pueden repetir.
Ahora en lugar de poner tantas veces el codigo y con distintas id, lo que yo haria seria ponerlo una sola ves y que el id fuera con un numero aleatorio, entonces le pondrias id="imagenes_noticia_numeroaleatorio" que podria ser de 0 a 999, de esa forma te aseguras que no se repita el id y solo estas usando un solo codigo.

Esto es solo una idea para mejorar un poco el trabajo, pero como dije te felicito por el mismo ;)

Si, lo malo es que no se hacer eso :)
Pero me podré a estudia, seguiré buscando la forma de compactarlo más
Gracias  ;D

Dhayzon


Jota28

¡¡Hola!! Genial, muy detallado.

A ver si al fin puedo implementarlo en la web donde estoy ^^

Sólo unas dudas amigo, quizás no sean la gran cosa, pero de repente ayuda a dejar las cosas más claras (para mí y otros users):

¿Cómo haría para poner las imágenes a la hora de hacer el post?
Por ejemplo:

<div id="unique_name" class="imageflow">
<img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
<img src="dir/image_2.jpg" longdesc="URL_2" width="w_2" height="h_2" alt="Text_2" />
<img src="dir/image_3.jpg" longdesc="URL_3" width="w_3" height="h_3" alt="Text_3" />
</div>

Esta sería la forma de siempre, pero de la forma en que lo hiciste ¿cómo hago esta última parte? Leí algo de un botón [islide]URL[/islide], ¿ese botón se crea en el editor de manera similar al instalar un mod?

De ser así, ¿sólo tendría que poner las URL de las imágenes y encerralos con el [islide]URL[/islide] y queda el Slide?

Amigo disculpa tantas preguntas, esque quiero estar al 100% seguro y no hacer algo mal que me afecte la web porque sería fatal.  :-[

Saludos y de antemano gracias ^^

MorderBR

aaa no, simplemente presionando el boton te genera varios bbcode
implemente el bbcode de centrar y los del slide
el botón genera este código

[center]
[slide]
[islide]URL DE IMAGEN[/islide]
[islide]URL DE IMAGEN[/islide]
[islide]URL DE IMAGEN[/islide]
[/slide]
[/center]


Digamos que el bbcode [slide][/slide] es el div contenedor y el bbcode [islide][/islide] es el contenedor de la imagen, si quieren agregar mas imágenes solo hay que presionar el ultimo botón que te genera este código [islide][/islide] o agregarlo directo en el php en subs-editor.php
en el array, la variable after o before, ahi notaras el bbcode y puedes acomodarlo a tu gusto

array(
'image' => 'img',
'code' => 'slide1',
'before' => '[center]\n[slide1]\n[islide]URL imagen[/islide]\n[islide]URL imagen',
'after' => '[/islide]\n[islide]URL imagen[/islide]\n[/slide1]\n[/center]',
'description' => $txt['slide']
),

Jota28

 ;D  ;D  ;D

Excelente amigo, anda a la perfección, muchas gracias en serio ^^

Y bueno, abusaré una vez más de tu buena fe  ::). Este Slide está basado en el efecto circular, ¿hay alguna posibilidad de ponerlo para que sea igual al ejemplo #3 de esta página: h ttp://finnrudolph.de/ImageFlow/Examples#No_reflections_no_scrollbar_no_captions?
Para que el Slide tenga un inicio y un fin.

Y lo último, ¿cómo haría para especificar el tamaño de las imágenes, por ejemplo height=180 y width=320?


Espero que no sea mucho pedir, de todas formas es un gran aporte el que has hecho, está perfecto.

Saludos y gracias nuevamente.

MorderBR

Quote from: Jota28 on December 20, 2012, 11:18:42 AM
;D  ;D  ;D

Excelente amigo, anda a la perfección, muchas gracias en serio ^^

Y bueno, abusaré una vez más de tu buena fe  ::). Este Slide está basado en el efecto circular, ¿hay alguna posibilidad de ponerlo para que sea igual al ejemplo #3 de esta página: h ttp://finnrudolph.de/ImageFlow/Examples#No_reflections_no_scrollbar_no_captions?
Para que el Slide tenga un inicio y un fin.

Y lo último, ¿cómo haría para especificar el tamaño de las imágenes, por ejemplo height=180 y width=320?


Espero que no sea mucho pedir, de todas formas es un gran aporte el que has hecho, está perfecto.

Saludos y gracias nuevamente.

Lo del fin e inicio se ajusta desde el archivo imageflow.js
en esta parte, está casi hasta abajo
var instanceThree = new ImageFlow();
instanceThree.init({ ImageFlowID: 'imagenes_noticia3',
  onClick: function() { return hs.expand(this,
                                    { src: this.getAttribute('longdesc') } ); },
  circular: true,
  aspectRatio: 3,
                      imagesM:0.7,
                      reflections: false,
                      slider: false,
                      captions: false,
                      opacity: true,
                      xStep: 125,
                      imageFocusM: 1.5,
                      startID: 1 });


En circular: true, solo cambialo por circular: false,

y el width de las imagenes se ajusta de manera general, este se ajusta desde imageflow.packed.css
en
.imageflow{
   overflow:hidden;
   position:relative;
   text-align:left;
   visibility:hidden;
   width:500px
}
ahí verás el width, lo puse a 500px porque, creo, de esa manera se ajusta un poco más fácil a cualquier resolución de pantalla, puedes ponerlo como quieras, incluso usando porcentajes, como 100% para que ocupe todo el ancho de cualquier resolución
:D

Jota28

:D Ok perfecto, sí sirve ^^

Muchas gracias amigo, sólo me queda depurar el tamaño de las imágenes, ahí le estaré moviendo.

Saludos.  8)


EDITO:

Hola, yo de nuevo xD

Amigo quería pedirte ayuda, no es precisamente sobre el tutorial, sino como un complemento del mismo.

Es sobre el highslide, en teoría no debe ser tan difícil pero no me funciona, y esperaba que me echaras una mano (de nuevo  ::))

Esto es lo que hice:

1-Descargué el paquete y una vez descomprimido, subí el highslide.packed.js, highslide.css y la carpeta graphics en el servidor

2-En el index.template.php puse en el head lo siguiente:

<link rel="stylesheet" href="highslide.css" type="text/css" />
<script src="highslide.packed.js" type="text/javascript"></script>


3-Luego en el imageflow.js en la función domReady function antes del último }); puse:

var Highslide_2 = new ImageFlow();
Highslide_2.init({ ImageFlowID: 'Highslide_2',
                        onClick: function() { return hs.expand(this,
                                    { src: this.getAttribute('longdesc'),
                                       outlineType: 'rounded-white',
                                       fadeInOut: true } ); } });


4-En el imageflow.css al final puse:

.highslide-container {
z-index:10003 !important;
}
.highslide-credits {
display:none !important;
}


Hecho todo esto creo que me debería funcionar, ya que seguí las instrucciones de h**p://finnrudolph.de/ImageFlow/Combinations#Highslide.

Como no funcionaba y viendo que se hace una instancia en el imageflow.js del Highslide, pues asumí que los archivos highslide.packed.js, highslide.css y la carpeta graphics deberían ir en la carpeta Flow para que así el llamado funcione, pero da el mismo resultado.

Ahora viendo el llamado de los script en el head, ¿habrá que cambiarle algo a estas líneas?:

<link rel="stylesheet" href="highslide.css" type="text/css" />
<script src="highslide.packed.js" type="text/javascript"></script>


Ya que al meterlos en la carpeta Flow ya no van a estar en el root de mi servidor y no sé si igual los "jale".

Disculpa si no va con el tema, pero como el ImageFlow lo implementé según tu tutorial pensé que tú serías quien me podría ayudar con esto.

De igual foma si alguien más sabe dónde está mi error le agradecería cualquier ayuda o sugerencia.

¡¡Saludos a todos!!

Advertisement: