I am trying to make a carousel that allows you to delete items, and have got it to work with one of the items on the carousel but it does not seem to work with the following items anyone got any ideas ?
Javascript
$(document).ready(function() {
$("#carousel").carouFredSel({
width : 675,
height : 130,
align : "left",
auto : {
pauseOnHover : true
},
items : {
visible:5
},
scroll : {
items : 1
},
prev : {
button : "#carPrev",
key : "left"
},
next : {
button : "#carNext",
key : "right"
}
}).find("#delButton").click(function(){
$("#rvBox").animate({
opacity : 0
}, 500).animate({
width : 0,
margin : 0,
borderWidth : 0
}, 500, function(){
$("#carousel").trigger("removeItem", $("#rvBox"));
});
});
});
HTML
<body>
<div id="container">
<header>
<h1>Recently Viewed Items Carousel</h1>
</header>
<div id="rViewed">
<div id="carousel">
<div id="rvBox" class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img1.jpg" />
</div>
<div id="rvBox" class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img2.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img3.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img4.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img5.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img6.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img7.jpg" />
</div>
<div class="rvBox">
<a class="delete" id="delButton" href="#"></a>
<img src="img/img8.jpg" />
</div>
</div>
<a class="prev" id="carPrev" href="#"></a>
<a class="next" id="carNext" href="#"></a>
</div>
</div>
</body>
CSS
body {
}
h1 {
font-family: Arial, Verdana, sans-serif;
font-size: 20px;
text-align: center;
}
/*DIV's*/
#container {
position:relative;
width:974px;
margin:auto;
background:#fff9b6;
}
#rViewed {
position:relative;
width:974px;
height:140px;
background:#ffffff;
padding: 15px 0 15px 0;
}
#carousel {
width:800px;
margin:0 0 0 40px;
}
.rvBox {
position:relative;
display:block;
float:left;
margin: 0 15px 0 0;
width:120px;
height:120px;
border:1px solid #dedede;
text-align:center;
background:url(../img/grad-x.jpg) repeat-x;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 3px #888;
-webkit-box-shadow: 3px 3px 3px #888;
box-shadow: 3px 3px 3px #888;
}
.rvBox img {
margin-top:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
a.prev {
background:url(../img/left.png) no-repeat;
width: 31px;
height: 31px;
display:block;
position:absolute;
top:60px;
}
a.prev:hover {
background:url(../img/left_hover.png) no-repeat;
}
a.next {
background:url(../img/right.png) no-repeat;
width: 31px;
height: 31px;
display:block;
position:absolute;
top:60px;
right:220px;
}
a.next:hover {
background:url(../img/right_hover.png) no-repeat;
}
a.delete {
background:url(../img/delete.png) no-repeat;
width: 21px;
height: 21px;
display: block;
position:absolute;
top:3px;
right:3px;
}
a.delete:hover {
background:url(../img/delete_hover.png) no-repeat;
}
First, you need to not have duplicate #delButtons and #rvBoxs. IDs shouldn't be repeated. In fact, you can remove those IDs completely, because you can just use the class names.
Here's what your HTML should look like now:
<body>
<div id="container">
<header>
<h1>Recently Viewed Items Carousel</h1>
</header>
<div id="rViewed">
<div id="carousel">
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img1.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img2.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img3.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img4.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img5.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img6.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img7.jpg" />
</div>
<div class="rvBox">
<a class="delete" href="#"></a>
<img src="img/img8.jpg" />
</div>
</div>
<a class="prev" id="carPrev" href="#"></a>
<a class="next" id="carNext" href="#"></a>
</div>
</div>
</body>
For the delete links, you can instead bind to the click event on the .delete class. Example:
.find(".delete").click(function(){});
The reason this is acceptable is that the specific link that was clicked becomes this inside that event handler. So the jQuery-wrapped link can be accessed with $(this).
The rvBoxs can also be accessed by the class, but what's missing here is that the only rvBox you're interested in within the handler is the rvBox that is the parent of the link clicked. You don't want to remove all the items.
So the handler can be rewritten as:
.find(".delete").click(function(){
var box = $(this).parent();
$(box).animate({
opacity : 0
}, 500).animate({
width : 0,
margin : 0,
borderWidth : 0
}, 500, function(){
$("#carousel").trigger("removeItem", box);
});
});