Foros del Web » Creando para Internet » HTML »

slider carousel fredsel para poner en blog de blogger

Estas en el tema de slider carousel fredsel para poner en blog de blogger en el foro de HTML en Foros del Web. hola gente, he empleado en mi blog la siguiente plantilla de tienda online [URL="http://javatemplates.com/2011/blogger-store-v2/"]http://javatemplates.com/2011/blogger-store-v2/[/URL] lo que me interesa de esta tienda es su carousel slider ...
  #1 (permalink)  
Antiguo 11/10/2012, 14:40
 
Fecha de Ingreso: agosto-2009
Mensajes: 26
Antigüedad: 14 años, 7 meses
Puntos: 0
Pregunta slider carousel fredsel para poner en blog de blogger

hola gente, he empleado en mi blog la siguiente plantilla de tienda online
[URL="http://javatemplates.com/2011/blogger-store-v2/"]http://javatemplates.com/2011/blogger-store-v2/[/URL]
lo que me interesa de esta tienda es su carousel slider fredsel, cuyo codigo es el siguiente:

Código:
scripts


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='https://jt-scriptsource.googlecode.com/svn/trunk/jquery.carouFredSel-4.5.2.js' type='text/javascript'/>
<script src='https://jt-scriptsource.googlecode.com/svn/trunk/function.featured_product.min.js' type='text/javascript'/>  (para capturar los posts recientes, este script es el que alimenta al slider)





css:

/* carrousel
>>>>>>>>>>>>>>>>>>>>>>>>*/
#featured-product{
}
.image_carousel {
position:relative;
clear:both;
background:url(https://lh5.googleusercontent.com/-JB-WwLJFHpI/TobUd5T_HVI/AAAAAAAAADY/dBCCBpdgvHA/h1600/divider.gif)repeat-x bottom left;
margin-bottom:20px;
padding:15px 15px 10px 28px
}
.image_carousel img {
width:110px;
height:110px;
border:1px solid #ccc;
background-color:#FFF;
display:block;
float:left;
margin:7px;
padding:9px
}
a.prev,a.next {
background:url(https://lh3.googleusercontent.com/-TrxqwBfKJuY/TobVyLwwySI/AAAAAAAAADk/bcR8HsruEeY/h1600/carousel_sprite.png) no-repeat transparent;
width:45px;
height:50px;
display:block;
position:absolute;
top:65px
}
a.prev {
left:-15px;
background-position:0 0
}
a.prev:hover {
background-position:0 -50px
}
a.next {
right:-15px;
background-position:-50px 0
}
a.next:hover {
background-position:-50px -50px
}
.pagination {
text-align:center
}
.pagination a {
background:url(https://lh3.googleusercontent.com/-TrxqwBfKJuY/TobVyLwwySI/AAAAAAAAADk/bcR8HsruEeY/h1600/carousel_sprite.png) 0 -300px no-repeat transparent;
width:15px;
height:15px;
display:inline-block;
margin:12px 5px 0 0
}
.pagination a.selected {
background-position:-25px -300px;
cursor:default
}
a.prev span,a.next span,.pagination a span {
display:none
}



html:

<div class='image_carousel clearfix'>
<script type='text/javascript'>
//<![CDATA[
random = true;
product_image = new Array();
product_image[0] = "/noimage.png"; // Image URL for product wich have no a thumbnail.
product_image_width = 250; // Product image width.
product_image_height = 260; // Product image height.
product_image_number = 9; // Value to show item.
//]]>
</script>
<script src='/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=featured_product' type='text/javascript'/>
<div class='clear'/>
<a class='prev' href='#' id='featured-product_prev'><span>prev</span></a>
<a class='next' href='#' id='featured-product_next'><span>next</span></a>
<div class='pagination' id='featured-product_pag'/>
</div> <!-- /fin image_carousel -->





---------
jquery carousel:



<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
  
    jQuery('#featured-product').carouFredSel({
        curcular: false,
        infinite: false,
        auto: true,
        prev: {
            button: '#featured-product_prev',
            key: 'left'
        },
        next: {
            button: '#featured-product_next',
            key: 'right'
        },
        pagination: '#featured-product_pag'
    });

jQuery('.footer-right a').hover(function(){
            jQuery(this).stop().animate({
                opacity: 1
            }, 400);
        }, function(){
            jQuery(this).stop().animate({
                opacity: 0.5
            }, 400);
        });
});
//end of ready function

//]]>
</script>

como veran este slider se alimenta de los nuevos post recientemente hechos en mi blog a traves de los scripts marcados en rojo,
pero el tema es que yo no quiero que el slider se alimente de mis post recientes
quiero que se alimente de fotos que yo quiera ponerle.
quisiera alimentar el slider con imagenes de otro lado, por ejemplo ... si tengo imagenes guardadas en un dropbox o en photobucket o simplemente enumerar las imagenes en el mismo codigo(he intentado hacerlo pero estos scripts me lo impiden); como deberia hacer? deberia cambiar ese script?
o como deberia proceder?o que parte del codigo deberia cambiar y/o eliminar?
me pueden ayudar?

Etiquetas: css, javascript, json, scripts, xml
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:23.