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&alt=json-in-script&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?
