Hola chicos, tengo la version de magento 1.5.0.1, y como magento connect manager no me funciona, eh buscado como poner un slideshow.
- Nos descargamos esto: http://worldxcomputers.com/jquery-slideshow.zip
Dentro tenemos una carpeta "images" y otra "js"
- Bien, la carpeta "images" la subimos tal cual al directorio root de nuestra pagina en el server.
y el contenido de la carpeta "js" que será un archivo llamado "jquery-1.3.1.min.js", lo subimos a la carpeta "js" de magento.
- Bien, ahora vamos al panel de control magento, "cms" - " Static Blocks " y le damos al botón "Añadir nuevo Bloque".
- Block Title: slideshow
- Identifier: slideshow
- Status: enabled
- Pulsamos en mostrar editor y pegamos el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="http://www.tuweb.net/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { //Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption
var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
<title></title>
</head>
<body>
<div style="height: 150px;" id="gallery"> <a
href="#" class="show"> <img
src="http://www.tuweb.net/images/flowing-rock.jpg"
title="" alt="Flowing Rock"
rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/grass-blades.jpg"
title="" alt="Grass Blades"
rel="<h3>Grass Blades</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/ladybug.jpg"
title="" alt="Ladybug"
rel="<h3>Ladybug</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/lightning.jpg"
title="" alt="Lightning"
rel="<h3>Lightning</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/lotus.jpg"
title="" alt="Lotus"
rel="<h3>Lotus</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/mojave.jpg"
title="" alt="Mojave"
rel="<h3>Mojave</h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/pier.jpg"
title="" alt="Pier"
rel="<h3>Pier</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/sea-mist.jpg"
title="" alt="Sea Mist"
rel="<h3>Sea Mist</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
height="150" width="650" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/stones.jpg"
title="" alt="Stone"
rel="<h3>Stone</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
height="150" width="650" /> </a>
<div style="height: 38px; top: 150px; left: 0px; width: 709px;"
class="caption">
<div style="margin-top: 0px; height: 47px;" class="content"></div>
</div>
</div>
<div class="clear"></div>
<br />
<br />
</body>
</html>
Fijaros que arriba tenemos que cambiar la dirección web por la vuestra.
y luego abajo tambien, tenemos que poner el nombre de la imagen que subais, una descripción, e incluso el tamaño que mejor se acomode a vuestra web.
height="150(tamaño alto)" width="650(tamaño largo)" /> </a> <a
href="#"> <img src="http://www.tuweb.net/images/nombre de tu imagen.jpg"
title="" alt="Pier"
rel="<h3>Pier</h3>( Aqui una descripcion del articulo )Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
- Pulsamos en Save Block
- Ahora vamos a "CMS" - " PAGES " , pinchamos en la linea home, y pinchamos en contenido
- le damos a Mostrar editor
- insertar Widget
- seleccionamos en el menu desplegable " cms static block "
- y ahora en el boton select block
- nos va a salir el que acabamos de crear con el nombre "slideshow" ( pinchamos sobre el )
- Y ahora en insertar widget
- save
( En el ftp, en la carpeta "js" le damos permisos 777 al archivo "jquery-1.3.1.min.js"
y listo ya lo tenemos concluido
Es mi primer aporte a la comunidad espero que a alguien le sirva, saludos a todos.
Magento Versión 1.5.0.1http://www.electronic-discount.net ( haciendola )
Vengo de Oscommerce y se me hace un poco raro usar Magento, pero lo tiene todo, estoy contentisimo.:jeje:
gracias por compartir worldx :ok:, aunque tengo un par de comentarios.
Primero, usas jquery. no es un problema por sí, pero ya que Magento viene con prototype personalmente intento usarlo en vez de jquery, así me ahorro unos kb cuando se cargan las paginas. Ademas, para usar jquery con prototype hay que hacerlo en modo noConflict(): me extraña que tu codigo funcione usdando $ (y no jQuery).
Otra cosa es que usas rutas absolutas para las imagenes y los links. Mejor usar las variables del cms, o sea para las imagenes:
<img src="{{skin url='images/slideshow/koenigsegg-ccxr-special-edition.jpg'}}" border="0" alt="" />
y los links:
<a href="{{store direct_url='webpage1.html'}}">
Aqui tienes mi ejemplo para hacer lo mismo, pero con prototype y usando las variables.
Indicanos la versión que usas en tu firma (en la cabecera, Acciones del Foro -> Editar Perfil -> Editar Firma)
No toques los ficheros del core, tienes que crear modulos para modificarlo
Algunas cosas que hay que saber sobre Magento, y el comercio online
Pues la verdad que tienes razon, con tu código es mas sencillo de cara al publico, pero weno, la cosa que furule bien, pero es como te comentaba en el otro post, pudiendo poner el slideshow de magento, descargando el paquete y listo, no hace falta esto, a noser que quieras añadir un segundo slideshow en otra parte de la pagina.
Saludos y thanks
Magento Versión 1.5.0.1http://www.electronic-discount.net ( haciendola )
Vengo de Oscommerce y se me hace un poco raro usar Magento, pero lo tiene todo, estoy contentisimo.:jeje:
Hola, que tal? Soy muy nuevo en Magento, que me habia ganado por cansancio varias veces, peroesta vez le voy dando la pelea 🙂 . Encontre este hilo y lo encontre muy bueno, pero como suele suceder, no me funciona. La imagen queda fija y al fondo de la pantalla queda un espacio negro hacia abajo http://www.tishert.cl/magento/# , cual es el problema? aunque parece estar a prueba de todo no me esta resultando y obviamente se debe a mi novatez. Cualquier ayuda la agradezco desde ya. Un abrazo!!
Serp
Magento ver. 1.5.1.0 / PHP 5.2.9 /
OSdave, post: 18532 wrote: Aqui tienes mi ejemplo para hacer lo mismo, pero con prototype y usando las variables.
Hola
He hecho lo que comentas pero se me ve en blanco, no sale nada, eso si el sitio del bloque aparece pero vacio. Hay que poner algo mas o instalar algo aparte de lo que dices??? He puesto los dos codigos tanto el java como el html en el source del bloque. He actualizado la cache y he hecho todos los flush menos el de cache storage que me salia que puede contener datos adiccionales y para no romper nada...
Salu2
Mi tienda
http://tienda.summarios.com/ versión magento 1.6.2.0
Recursos Webmasters