jquery y php Estoy comenzando con jquery en el diseño de mi web
e logrado insertar en un acourdeon de divs un carousel y me gustaria que pudiera añadir tantos carouseles como quiera en la misca pagina si añado nuevos solo me funciona uno.
Código:
pueden ver la idea en www.albertoramos.info
<head >
<!-- CAROUSEL -->
<script src="jquery.js" type="text/javascript"></script>
<script src="carousel.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'carousel', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<!----------CAROUSEL------------>
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="supersized.shutter.min.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="js/jquery.ba-resize.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<style>
.st-accordion ul li > a span{
visibility:hidden;
}
</style>
</noscript>
<script type="text/javascript">
$(function() {
$('#st-accordion').accordion({
oneOpenedItem : true
});
$('.list-expandable>li').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
$(this).children('ul.check-list').slideDown();
} else {
$(this).addClass('active')
$(this).children('ul.check-list').slideUp();
}
});
});
jQuery(function($){
$.supersized({
// Functionality for the Background Slideshow
slide_interval : 7000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'slideshow_01.jpg', title : 'Image title'},
{image : 'slideshow_02.jpg', title : 'Image title'},
{image : 'slideshow_03.jpg', title : 'Image title'},
{image : 'slideshow_04.jpg', title : 'Image title'} // Be sure there is no comma after your last slide
]
});
});
// Functionality for Recent Project Toggle
function showonlyone(thechosenone) {
var newsbox = document.getElementsByTagName("div");
for(var x=0; x<newsbox.length; x++) {
name = newsbox[x].getAttribute("class");
if (name == 'news-description') {
if (newsbox[x].id == thechosenone) {
newsbox[x].style.display = 'block';
}
else {
newsbox[x].style.display = 'none';
}
}
}
}
function unhide(element,divID) {
var item = document.getElementById(divID);
if (item) {
if($(item).hasClass('hidden')){
$(element).css('background','url("wp-content/themes/twentyeleven/images/icon_sq_collapse.png") no-repeat #000');
$(item).removeClass('hidden');
$(item).addClass('unhidden');
} else {
$(item).removeClass('unhidden');
$(item).addClass('hidden');
$(element).css('background','url("wp-content/themes/twentyeleven/images/icon_sq_expand.png") no-repeat #ff3c00');
}
}
adjustRespCaption();
}
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);
}
function submitContactForm(){
$.post('contact.php', $('#contactform').serialize(), function(response){
$('#contactResponse').html(response);
}, 'html');
}
function adjustPortfolioItems(){
var containerWidth = $('ul.portfolio').width();
if(containerWidth == 0)
return;
var itemWidth = $('ul.portfolio').children('li.item').width();
var remaining = containerWidth % itemWidth;
var itemsCount = Math.floor(containerWidth/itemWidth);
var itemMargin = remaining/(itemsCount-1);
itemMargin = Math.floor(itemMargin);
var i = 1;
$('ul.portfolio li.item').each(function(){
if((i % itemsCount) != 0){
$(this).css('margin-right', itemMargin);
} else {
$(this).css('margin-right', 0);
}
i++;
});
}
$(window).resize(function(){
adjustPortfolioItems();
adjustRespCaption();
});
function adjustRespCaption(){
$('.responsive-caption').each(function(){
$(this).height($(this).parent().height()
- (parseInt($(this).css('padding-top'))+parseInt($(this).css('padding-bottom'))) - 7);
});
}
$(document).ready(function(){
adjustRespCaption();
$('.st-content-container').resize(function(){
setTimeout(function(){
$(this).parent('li.nav-item').height($(this).height());
},1000);
});
var section = getURLParameter('section');
if(section.length !=0){
$('#'+section).siblings('a').click();
}
adjustPortfolioItems();
});
</script>
</head>
<body>
<div class="logo">
<img src="" alt="logo" width="500px" height="175px" />
</div>
<!--End Logo-->
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<!--Begin Accordian-->
<div class="container">
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<!--Start About-->
<li class="nav-item">
<a href="#"><h1>About</h1><span class="st-arrow">Open or Close</span></a>
<div id="about" class="st-content-container">
<div class="st-content">
<div class="fill">
<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------->
</div>
<div class="clear-float"></div>
</div>
</li>
<!--End About-->
</div>
</div>
</html>
a ver si me pueden ayudar ,
un saludo, y muchisimas gracias de antemano,
un saludo,
pepistvweb
