ShadowBox en Magento

Tema en 'Diseño' iniciado por Antonio, 31/7/08.

Estado del tema:
Cerrado para nuevas respuestas
  1. Antonio

    Antonio Nuevo usuario

    97
    0
    0
    Hola amigos:hola:

    Quiero mejorar el diseño de la tienda con magento para que muestre las fotos o imagenes con el tipico efecto de sombra. He estado mirando y he visto que hay un programa llamado ShadowBox para instalar este efecto.

    ¿Alguno que haya instalado o conozca este programa?

    Un saludo
     
  2.  
    Comunidad Magento orgullosamente patrocinada por el hosting y vps magento de FactoriaDigital.com.
  3. OSdave

    OSdave Super Moderador Miembro del equipo

    2.136
    4
    36
    hola Antonio,
    El shadowbox lo uso en mi tienda (ojo, NSFW :susto:) y me encanta. Es como el lightbox pero acepta tambien videos, formularios, paginas webs...
    Todavia no he intentado instalarlo en magento, pero aqui hay un tutorial de como hacerlo.
    Si te animas dinos que tal te va.
    salu2
     
  4. Antonio

    Antonio Nuevo usuario

    97
    0
    0
    Hola OSdave.

    Gracias por tu aportación.
    En este blog que está en español encontre también el mismo manual. A ver si tengo tiempo y lo instalo y ya os cuento.

    Muy interesante tu tienda, de entrada me esperaba ver otro tipo de articulos:sorprendido:. En principio he intentado ver una imagen de las que tienes con el Firefox 3 y se queda cargando sin poder verla. A lo mejor es cosa de mi ordenador, mira a ver.

    Un saludo
     
  5. gmb

    gmb Super Moderador Miembro del equipo

    506
    4
    18
    A mi tampoco me cargan las imagenes!!
     
  6. OSdave

    OSdave Super Moderador Miembro del equipo

    2.136
    4
    36
    mmm no entiendo: Antonio me dijo que lo reintento despues y que se cargaron sin problema...
    pero si no se cargan a la primera visita, tengo un problema muy gordo :(
    bueno, a revisar codigo, otra vez
     
  7. gmb

    gmb Super Moderador Miembro del equipo

    506
    4
    18
    Probado con:

    Ubuntu 7.10
    firefox 2 y opera

    No carga.
     
  8. Antonio

    Antonio Nuevo usuario

    97
    0
    0
    Lo siento pero a mi particularmente con Windows y Unix no tengo problemas en verlas, es decir, se cargan perfectamente (utilizando Firefox, i.explorer,safari).

    Opera no lo sé.

    En un principio tal como le comenté a OSdave a mi no se me cargaban, pero al rato volví a probar y me cargaban ya correctamente (me dije a mi mismo que seguro que OSdave lo había solucionado).

    Repito que ahora mismo desde mi ordenador se cargan correctamente

    :enfadado: estoy viendo a OSdave encabritao con el código..coño passsaaa:bate::bate::despiste:
     
  9. Antonio

    Antonio Nuevo usuario

    97
    0
    0
    Siguiendo con el título de este tema, también es interesante el script slimbox, tiene unos efectos interesantes. Utiliza el el framework de Mootools. Además parece mas facil de configurar que el shadowbox. Utiliza CSS para definir los estilos de la ventana. Es otra opción interesante.

    Ver DEMO

    LINK descarga: slimbox

    Ver PAGINA

    Saludos
     
  10. sophi

    sophi Nuevo usuario

    5
    0
    0
    Hola:
    Yo instalé el shadowbox en mi tienda y funciona perfectamente. Lo hice siguiendo las instrucciones del manual indicado en....

    Antes, lo había intentado con:

    ... Este es el mismo manual, pero el pack de download no es el mismo...

    Saludos!!
     
  11. scravenger

    scravenger Nuevo usuario

    3
    0
    0
    Hola, me acabo de registrar, y espero pasar bastante tiempo por aqui, ya que no tengo ni idea de programacion ni de diseño y me he metido a montar una tienda online yo solito( menudo marron), llevo 10 dias acostandome a las tantas o no acostandome, y es que cada vez me entero menos. Bueno, al grano, a mi me gusta esto del shadowbox y lo queria añadir a la chapuza que estoy haciendo, pero no me va, llevo 3 dias con ello y no se como hacerlo, asi que os pido ayuda, vereis tengo la version 1.3.2.1 y he intentado configurarlo desde las paginas que comentais y tambien desde esta, que me parece mejor, o al menos mas reciente. El caso es que hago todo lo que dice paso a paso, pero no me va, alguno puede hecharme una manopla? Un saludo compis

    la pagina en cuestion : http://www.swiftcore.com/en/magento...native-lightbox-30b-magento.html#comment-1066.
     
  12. Larry

    Larry Miembro

    769
    18
    18
    Buenos dias,

    Acabo de instalar el ShadowBox desde el link que ofreces y me funciona perfectamente. Aquí van los pasos que tienes que realizar:

    1.- Descargate la version modificada:http://www.swiftcore.com/sites/default/files/shadowbox-build-3.0b-modified.rar

    2.- Crea una carpeta dentro de tudominio/js/shadowbox-build-3.0b/
    y dentro pegas todo el contenido de el archivo que te acabas de descragar. tiene que quedarte algo como muestra la imagen1.

    3.- ahora nos dirigimos a catalog.xml. Lo encotramos en tudominio/app/design/frontend/tutema/tutema/layout/catalog.xml

    Lo abrimos con un editor de texto y buscamos las siguientes lineas:

    PHP:
    <catalog_product_view>
            <!-- 
    Mage_Catalog -->
            <
    reference name="root">
                <
    action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            </
    reference>
            <
    reference name="head">
                <
    action method="addJs"><script>varien/product.js</script></action>

                <
    action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
                <
    action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
                <
    action method="addItem"><type>js</type><name>calendar/lang/calendar-en.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
                <
    action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
            </
    reference>
    y lo modificamos por estas:

    PHP:
    <catalog_product_view>
            <!-- 
    Mage_Catalog -->
            <
    reference name="root">
                <
    action method="setTemplate"><template>page/2columns-right.phtml</template></action>
            </
    reference>
            <
    reference name="head">
                <
    action method="addJs"><script>varien/product.js</script></action>
                <!-- 
    shadowbox javascript -->
                <
    action method="addJs"><script>shadowbox-build-3.0b/shadowbox.js</script></action>             
                <
    action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
                <!-- 
    shadowbox css -->
    <
    action method="addItem"><type>js_css</type><name>shadowbox-build-3.0b/shadowbox.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
    </
    reference>

    Ahora vamos a modificar el fichero media.phtml. Lo encontraremos en tudomino/app/design/frontend/tutema/tutema/template/catalog/product/view/media.phtml

    Primero de todo añadiremos al principio del archivo (despues de los comentarios y despues del ?> el siguiente codigo:

    PHP:
    /**
     * Product media data template
     *
     * @see Mage_Catalog_Block_Product_View_Media
     */
    ?>
    <script type="text/javascript">
    Shadowbox.init();
    </script>
    Vamos a buscar todas estas lineas de codigo y las vamos a borrar:

    PHP:
    <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
    <p class="product-image-zoom">
        <?php
            $_img 
    '<img id="image" src="'.$this->helper('catalog/image')->init($_product'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
            echo 
    $_helper->productAttribute($_product$_img'image')
        
    ?>
    </p>
    <p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture'?></p>

    <div class="image-zoom" id="track_outer">
        <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif'?>" alt="<?php echo $this->__('Zoom Out'?>" class="btn-zoom-out" />
        <div id="track">
            <div id="handle"></div>
        </div>
        <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif'?>" alt="<?php echo $this->__('Zoom In'?>" class="btn-zoom-in" />
    </div>
    <script type="text/javascript">
        Event.observe(window, 'load', function() {
            product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
        });
    </script>
    <?php else: ?>
        <?php
            $_img 
    '<img src="'.$this->helper('catalog/image')->init($_product'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';
            echo 
    $_helper->productAttribute($_product$_img'image')
        
    ?>
    <?php 
    endif; ?>
    ahora añadiremos en el sitio que hemos borrado el siguiente codigo:

    PHP:
    <p class="product-image-zoom">
    <a href="<?php echo $this->helper('catalog/image')->init($_product'image'); ?>"
    title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>"
    rel="shadowbox[product]">
    <img src="<?php echo $this->helper('catalog/image')->init($_product'image')->resize(300); ?>"
    alt="<?php echo $this->htmlEscape($this->getImageLabel()); ?>"
    title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" /></a>
    </p>
    <p class="a-center" id="track_hint"><?php echo $this->__('Click on above image to enlarge'?></p>
    y por último modificaremos la siguiente linea

    PHP:
    <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail'$_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
     
    por esta otra:

    PHP:
    <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail'$_image->getFile()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="shadowbox[product]"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail'$_image->getFile())->resize(143); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
    y ya esta! con esto te tendria que funcionar sin problemas. Esta prueba la he hecho con la version de magento 1.3.2.2 y con la version de shadowbox-build-3.0b modificada.

    Un saludo y espero que te sriva.
     

    Adjuntos:

  13. scravenger

    scravenger Nuevo usuario

    3
    0
    0
    Bueno, alguien puede ayudarme o nadie sabe de lo que estoy hablando. Saludos
     
  14. Larry

    Larry Miembro

    769
    18
    18
    Hace tiempo envie como hacer funcionar el ShadoBox pero mi respuesta necesitaba confirmacion de algun admin del foro. Asi que si algun admin ve la posibilidad de que mi post este visible creo que ayudaria a esta gente.

    Un saludo.
     
  15. Xarlie

    Xarlie Super Moderador Miembro del equipo

    2.715
    10
    38
  16. Larry

    Larry Miembro

    769
    18
    18
    No pasa nada jejeje, se que mantener un foro es complicado y mas cuando hay otros trabajos que realizar.

    Gracias por mostrarlo al mundo! :D Ahora espero que les ayude.
     
  17. trobete

    trobete Nuevo usuario

    1
    0
    0
    Muchas gracias por el tutorial, sólo una cosa más, si queréis tener los textos en castellano tendréis que modificar estas líneas del archivo shadowbox.js
    Insertar CODE, HTML o PHP:
    initialHeight: 160,         // initial height (pixels)
    initialWidth: 320,          // initial width (pixels)
    language: 'en',             // the language to use
    modal: false,               // trigger Shadowbox.close() when overlay is
                                // clicked
    onChange: null,             // hook function to be fired when changing
                                // from one item to the next. Is passed the
                                // item that is about to be displayed
    por estas otras
    Insertar CODE, HTML o PHP:
    initialHeight: 160,         // initial height (pixels)
    initialWidth: 320,          // initial width (pixels)
    language: 'es',             // the language to use
    modal: false,               // trigger Shadowbox.close() when overlay is
                                // clicked
    onChange: null,             // hook function to be fired when changing
                                // from one item to the next. Is passed the
                                // item that is about to be displayed
    un saludo!
     
  18. scravenger

    scravenger Nuevo usuario

    3
    0
    0
    Muchas gracias por la informacion, la verdad es que lo habia dejado por imposible, ahora ando liado con otras historias, pero en cuanto tenga un hueco, lo pruebo y os comento el resultado. De nuevo, muchisimas gracias. Un saludo amigos.
     
  19. carlosdelmolino

    carlosdelmolino Nuevo usuario

    87
    0
    0
    Hola Larry,

    Acabo de probar con tu metodo y siguiendo tu tutorial del shadowbox y adivina q?
    Pues que me pasa lo mismo, no sé porque razón la primera imagen me sale 2 veces, me carga 3 imagenes...

    Pero ahora además las 2 miniaturas que carga bajo la imagen principal me salen descentradas.
     
  20. carlosdelmolino

    carlosdelmolino Nuevo usuario

    87
    0
    0
    nadie sabe como arreglar esto? la verdad es que da mala imagen a la web que la imagen 1 salga duplicada.
     
  21. tocnaza

    tocnaza Nuevo usuario

    1
    0
    1
    Hola a todos!

    Ya sé que el hilo es un poco antiguo pero acabo de instalar shadowbox en mi tienda y me da el mismo error.

    ¿Alguna sugerencia?

    Saludos,
    Soler Seguridad
     
Cargando...
Estado del tema:
Cerrado para nuevas respuestas

Compartir esta página

Cargando...