jesusruiz Posted December 9, 2011 Share Posted December 9, 2011 Hola y gracias por leer este mensaje. Estoy creando una nueva página de CMS, a la que añado algo de texto y una imágen. Me gustaría que esta imágen que añado a la página se abriese al hacer clic en ella, con un tamaño mayor. Es decir, lo que busco es hacer el mismo efecto que cuando entramos en la ficha de un producto, y hacemos clic en la imágen y se abre en grande, gracias al efecto Javascript. He intentado crear este efecto, con el editor de CMS, pero no lo consigo. He intentado copiar el código de la ficha del producto, en el editor HTML del CMS, pero ni se produce el efecto, ni me mantiene la estructura del diseño (aunque esto me da igual y lo veo lógico que sea así). ¿Alguien sabe como conseguir ese efecto?. Muchas gracias y un un saludo. Link to comment Share on other sites More sharing options...
ErikSebastia2 Posted December 9, 2011 Share Posted December 9, 2011 Hola compañero, tendras que buscar un módulo "zoom" para esto (gratuito creo que hay aguno). Saludos Link to comment Share on other sites More sharing options...
luismiguel Posted December 11, 2011 Share Posted December 11, 2011 Hola y gracias por leer este mensaje. Estoy creando una nueva página de CMS, a la que añado algo de texto y una imágen. Me gustaría que esta imágen que añado a la página se abriese al hacer clic en ella, con un tamaño mayor. Es decir, lo que busco es hacer el mismo efecto que cuando entramos en la ficha de un producto, y hacemos clic en la imágen y se abre en grande, gracias al efecto Javascript. He intentado crear este efecto, con el editor de CMS, pero no lo consigo. He intentado copiar el código de la ficha del producto, en el editor HTML del CMS, pero ni se produce el efecto, ni me mantiene la estructura del diseño (aunque esto me da igual y lo veo lógico que sea así). ¿Alguien sabe como conseguir ese efecto?. Muchas gracias y un un saludo. Tienes otra solución, que es la de crear un link sobre la imagen de tu CMS, para ello deberás crear una carpeta en tu repertorio con las imagenes agrandadas, y en al cms sobre la imagen, le indicarás la ruta del link de la imagen en concreto, que quieres que se abra como si se tratara de un producto. Saludos. Link to comment Share on other sites More sharing options...
tamu secreto Posted December 11, 2011 Share Posted December 11, 2011 cuando creas el links de la imagen debes llamar al rel de fancybox, pero creo que el editor tinymce eliminara estas estiquetas (en teoria deberia eliminarlas). asi que lo que te queda es adicionar las imagenes y luego editar el codigo del cms desde la base de datos para asicionar los rel ... mira por aqui : http://fancybox.net/ http://fancybox.net/howto Para ver la utilizacion de los rel en prestashop simplemente mira algun archivo que lance poup o imagenes. saludos Link to comment Share on other sites More sharing options...
jesusruiz Posted December 11, 2011 Author Share Posted December 11, 2011 Gracias por vuestras respuestas. No parece sencillo lo que quiero hacer, así que mucho me da que mientras no encuentro otra solución, abriré una nueva pestaña con la imágen o una nueva página. He intentado miles de cosas que he leido en los foros de inglés y francés, pero a mí personalmente no me funcionan. Si encuentro la solución la postearé por aquí. Un saludo a todos y gracias de nuevo. Link to comment Share on other sites More sharing options...
luismiguel Posted December 11, 2011 Share Posted December 11, 2011 cuando creas el links de la imagen debes llamar al rel de fancybox, pero creo que el editor tinymce eliminara estas estiquetas (en teoria deberia eliminarlas). asi que lo que te queda es adicionar las imagenes y luego editar el codigo del cms desde la base de datos para asicionar los rel ... mira por aqui : http://fancybox.net/ http://fancybox.net/howto Para ver la utilizacion de los rel en prestashop simplemente mira algun archivo que lance poup o imagenes. saludos Gracias Tamu creo que debo de actualizarme un poco, todavia sigo con mis viejos trucos de las versiones anteriores, es evidente que Prestashop evoluciona bastante rapido, lo cual es de agradecer, y no no tenemos mas remedio que ponernos al dia para seguir las nuevas versiones. Saludos. Link to comment Share on other sites More sharing options...
luismiguel Posted December 12, 2011 Share Posted December 12, 2011 Gracias por vuestras respuestas. No parece sencillo lo que quiero hacer, así que mucho me da que mientras no encuentro otra solución, abriré una nueva pestaña con la imágen o una nueva página. He intentado miles de cosas que he leido en los foros de inglés y francés, pero a mí personalmente no me funcionan. Si encuentro la solución la postearé por aquí. Un saludo a todos y gracias de nuevo. Hola Jesus, creo que aqui tienes la solución, la he probado y va de maravilla: http://ciudadblogger.com/2009/08/ampliar-imagen-al-hacer-click.html Suerte ya nos contarás. Saludos. Link to comment Share on other sites More sharing options...
jesusruiz Posted December 13, 2011 Author Share Posted December 13, 2011 Gracias por las molestias que te estás tomando luismiguel Usuarios que ayuden como tu, es lo que necesita esta comunidad. He estado mirando la web que me mandas y está bastante bien ese efecto. Aunque no lo he probado todavía, debo suponer que si tengo texto a la derecha de la imagen se superpondrá por encima de este. Lo ideal sería, que funcionara en el CMS el efecto javascript (fanxybox) tal y como funciona en todas las demás parte de la tienda. He agregado las líneas javascripts necesarias y el .css al archivo cms.tpl, pero a la hora de llamar al efecto no me funciona. Simplemente pasa de él, y se abre la imagen en grande pero en una nueva pestaña. Intentaré probar luego con más tiempo, para ver si lo logro dejar como quiero y si veo que no lo consigo, usaré el código de esa web que me has pasado o alguno otro parecido. Un saludo y gracias por todo. Link to comment Share on other sites More sharing options...
luismiguel Posted December 13, 2011 Share Posted December 13, 2011 Hola Jesus. No hace falta dar las gracias, es lo normal, para eso estamos todos aquí. Tienes que editar tu texto y colocar el codigo con un programa editor de htlm (dreamweaver o similar),y crear una carpeta con tus imaginas con un tamaño igual o superior al que quieras ampliarlo, luego, creas un archivo HTLM y editas el texto que quieres insertar en tu CMS, con el codigo css en rojo, asignando la ruta URL de tu imagen,en verde. Luego en tu editor CMS pinchas la pestaña "htlm" y se te abre una ventana donde pegas el texto en HTLM que has generado con el dremweaver, u otro. Si la ruta de la imagen está bien indicada y la imagen la tienes en la carpeta creada en tu repertorio Prestashop, no debería haber ningún problema. Te pongo un ejemplo. <div align="left">Anteriormente vimos cómo hacer para agrandar una imagen al pasar el mouse sobre ella; en esa ocasión usamos un poco de CSS para lograr ese efecto. Esta vez haremos algo mucho más simple, con un simple código podremos ampliar una imagen al hacer click sobre ella, y reducirla de nuevo con un doble click, como en este ejemplo: </div> <br /> <div align="center">Click para ampliar, doble click para reducir</div> <br /> <div align="center"><img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="http://localhost/prestashop/tu carpeta/tu imagen.jpg" width="100"/> </div> <br /> <div align="left">Sólo debes cambiar la URL de la imagen (en su tamaño normal) El primer width y height son las medidas a la que se va agrandar la imagen al hacer clik, width es el ancho y height es el alto. El segundo width y height son las medidas a la que se va a reducir la imagen al hacer doble click. El último width es el ancho de la imagen que se mostrará al cargar la página, es decir el thumbnail, se recomienda que sea el mismo ancho que tendrá la imagen al reducirse cuando se haga doble click.</div> </div> Puedes colocar la imagen y texto donde quieras, centrada izda. dcha... con <div align=" "> y espaciar los párrafos con : <br /> Tambien puedes editarlo directamente en el CMS en la pestaña "htlm". Saludos. Link to comment Share on other sites More sharing options...
luismiguel Posted December 13, 2011 Share Posted December 13, 2011 Hola. Con un programa que tengo de edición htlm. He conseguido el efecto que buscas, el codigo es este: <p class="imAlign_center"><span class="ff0 fc2 fs10 "><a class="ImLink" href="javascript:imZIZoom('files/3323906923_d3ddf14618.jpg',487,500,'rosa');" title=""><img class="imImage" src="images/home_0_00_1.jpg" width="154" height="147" alt="" /></a></span><span class="ff2 fc0 fs10 "> </span><span class="ff0 fc0 fs10 "><a class="ImLink" href="javascript:imZIZoom('files/ceci_024.jpg',375,500,'maceta');" title=""><img class="imImage" src="images/home_0_00_2.jpg" width="201" height="145" alt="" /></a></span><span class="ff2 fc0 fs10 "> </span><span class="ff0 fc0 fs10 "><a class="ImLink" href="javascript:imZIZoom('files/flores_1040691057_flores174.jpg',500,500,'ramo');" title=""><img class="imImage" src="images/home_0_00_3.jpg" width="148" height="146" alt="" /></a></span><span class="ff2 fc0 fs10 "><br /></span></p> En Prestashop es más complicado, al tener que usar archivos php.- tpl.- y mysql. que hay que combinar, con el CMS. Si te puede ayudar en algo, Aquí te dejo el resultado: para visualizar.. http://www.miperfume.co.cc saludos Link to comment Share on other sites More sharing options...
jesusruiz Posted December 13, 2011 Author Share Posted December 13, 2011 Que crack eres luismiguel Ese último efecto queda de lujo, aunque tengo que comprobar si el editor HTML que trae el CMS de Prestashop permite incluir ese código... espero que sí Ya te contaré mañana cuando lo pruebe, pero de todas formas lo añado a Favoritos porque es muy bonito para añadirlo en otra web si lo necesitara. Mañana te cuento que tal me ha ido en Prestashop. Un cordial saludo y millones de gracias. Link to comment Share on other sites More sharing options...
jesusruiz Posted December 14, 2011 Author Share Posted December 14, 2011 Pues nada, después de haberlo probado ese efecto tampoco funciona, aunque claro, es lógico porque supongo que tendrá una parte CSS o alguna función JavaScript que no está en el código. De todas formas, es igual, definitivamente voy a dejarlo tal como lo tengo (sin efecto), y ya tranquilamente iré probando a como incluir el código del fancybox dentro de las páginas CMS. En cuanto descubra algo, posteare por aquí. Un saludo y gracias a todos los que me habéis ayudado y respondido Link to comment Share on other sites More sharing options...
Recommended Posts