Bienvenido, Invitado
Nombre de Usuario: Contraseña:

TEMA: Javascript en joomla

Javascript en joomla 4 años 8 meses antes #6351

  • lhuayllani
  • Avatar de lhuayllani
  • Fuera de línea
  • Fresh Boarder
  • Mensajes: 5
  • Karma: 0
<div id="mylightbox">
<div id="mylightboxwrapper">
<div id="mylightboxcontent">
<a id="mylightboxclose"><img src="images/close.gif" /></a>


<div id="light_diseno" class="mylightboxcontent">
<h2>Diseño Gráfico Pre Prensa:</h2>
<table>
<tr align="left" valign="top">
<td><img src="images/foto6.jpg" class="img fleft" /></td>
<td>
<p>En <b>Sol Graf SAC </b> Este primer paso es muy importante en el se define el alcance del trabajo a realizar, para que el producto llene sus expectativas; hacemos uso de software de diseño y retoques fotográficos, los pasos que realizamos son:</p>
<ul>
<ul>
<li><b>Escaneo</b> (Digitalizamos su dibujo a mano o fotografias para diseñar)</li>
<li><b>Retoque</b> (retoque y restauración de imagenes)</li>
<li>Escoger el color.</li>
<li>Armados de prototipos o machiotes.</li>
<li>Ajustes óptimos de colores.</li>
<li>Finalmente quemamos una placa con su diseño para su impresión</li>
</ul>
</ul></td>
</tr>
</table>
</div>
</div>
</div>
</div>


<a id="f1" href="#">Leer más </a>


Hola haber si alguien me puede dar una mano, trabajo con el template phoca-t quiero hacer este efecto que vi en esta pagina www.azagraphicperu.com/ en el menu contacto se visualiza una ventana con un fondo opaco para la pagina index. Este efecto tambien se puede ver cuando en joomla se desea agregar un nuevo modulo...
vi la pagina y usan javascript el cual e copiado y bajado normalmente en index.html
ahora en sitio joomla (localhost) hice unos cambios pero no logro esto fue lo que hice
1ro.-copie los archivos javascripts necesarios en la carpeta de mi plantilla y modifique el index.php para llamarlos (si funciona)

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/jquery-ui-1.8.9.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript/mylightbox.js" type="text/javascript" charset="utf-8"></script>
<!-- Cargo codigo javascript-->
<script>
$(document).ready(init);
function init(){
setLightBox();
}
</script>
2.- cree un modulo html personalizado para poner un link en una parte especifica de la plantilla que uso y puse ESTE CODIGO PARA LLAMAR UN DIV
<a id="f1" href="#">Leer más </a> el cual es una ancla que debe llamar a este CODIGO. (AQUI EL PROBLEMA) no se donde poner este codigo... en la pagina en la que vi esta en el index.html fuera de todo lo maquetado es decir no se previsualiza; solo cuando se le llama con el ancla
<div id="mylightbox">
<div id="mylightboxwrapper">
<div id="mylightboxcontent">
<a id="mylightboxclose"><img src="images/close.gif" /></a>


<div id="light_diseno" class="mylightboxcontent">
<h2>Diseño Gráfico Pre Prensa:</h2>
<table>
<tr align="left" valign="top">
<td><img src="images/foto6.jpg" class="img fleft" /></td>
<td>
<p>En <b>Sol Graf SAC </b> Este primer paso es muy importante en el se define el alcance del trabajo a realizar, para que el producto llene sus expectativas; hacemos uso de software de diseño y retoques fotográficos, los pasos que realizamos son:</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

4.- el codigo que piratie e implante funciona puse este codigo en un modulo html personalizado pero como saben te piden la posicion de la plantilla y cuando llamo con el ancla aparece en esa posicion sin cumplir con el efecto que quiero (fondo opaco con una ventana emergente. )
pregunta donde poner el codigo div que es llamado con una ancla ya proble en el index.php y se malogra la plantilla; tambien provee con un articulo con codigo html ahi no lo llama.
posible
solución 1.- que no se como hacerlo es poner en el index.php pero que no se visualise necesito codigo php para insertar seccion div que solo se puede acceder con ancla.
solucion 2.- en joomla como llamo a un articulo con una ancla.
alguien puede ayudarme colegas.
solución 3.- usar las librerias que usa joomla para conseguir ese efecto opaco de fondo (cuando deseamos agregar un nuevo modulo o previsualizamos nuestras plantillas ) esto ta dificil creo
El administrador ha desactivado la escritura pública.

Re: Javascript en joomla 4 años 8 meses antes #6359

  • antonio
  • Avatar de antonio
  • Fuera de línea
  • Fresh Boarder
  • Mensajes: 4
  • Karma: 0
Hola, Feliz Año.
Creo que siempre es recomendable empezar planteando la duda y luego poner el código, porque uno entra y ve de primera un trozo de código que no sabe de que va...

Bien pasando a la consulta, no se si necesitas copiar exactamente el script de la página de muestra, el efecto que muestras es un lightbox, de esos hay cientos de ejemplos en la web para descargarse.
Vi uno en Github, creo que te puede ayudar.github.com/jackmoore/colorbox

Descargas el ejemplo y abres por decir el ejemplo 1 y colocas el script en el index de tuntemplate
<link rel="stylesheet" href="colorbox.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="../colorbox/jquery.colorbox.js"></script>
		<script>
			$(document).ready(function(){
				//Examples of how to assign the ColorBox event to elements
				$(".group1").colorbox({rel:'group1'});
				$(".group2").colorbox({rel:'group2', transition:"fade"});
				$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
				$(".group4").colorbox({rel:'group4', slideshow:true});
				$(".ajax").colorbox();
				$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
				$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
				$(".inline").colorbox({inline:true, width:"50%"});
				$(".callbacks").colorbox({
					onOpen:function(){ alert('onOpen: colorbox is about to open'); },
					onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
					onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
					onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
					onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
				});

				//Example of preserving a JavaScript event for inline calls.
				$("#click").click(function(){ 
					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
					return false;
				});
			});
		</script>

Debes logicamente reemplazar las rutas para los script y el css, una vez que tengas eso listo en el artículo haces la llamada y listo, funciona, yo lo probé en Joomla y trabaja bien

La llamada sería algo así
<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>

En el ejemplo es un link de texto, lo cambias por una imagen y ya tienes tu efecto

Saludos
Última Edición: 2 años 8 meses antes por FeDoo.
El administrador ha desactivado la escritura pública.




Moderadores: FeDoo, willin, josecardenasvejar, danylocl, hector_scl, gonzacha
Tiempo de carga de la página: 0.280 segundos
Gracias a Foro Kunena