I’m not the best programmer, in fact I’m no programmer at all, I can handle HTML and CSS but anything more advanced is beyond me. I’ve implemented jCapSlide on a website, and it works fine, however, each of the images has to have it’s own attributes, like so:
<script type="text/javascript">
$(function() {
$("#capslide_img_cont").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont2").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont3").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont4").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont5").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont6").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont7").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont8").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont9").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont10").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont11").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont12").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont13").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont14").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont15").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont16").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont17").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont18").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont19").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
$("#capslide_img_cont20").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
});
</script>
Obviously this creates a lot of redundant code, therefore loading time (and every little helps), so I’m after info on how to reduce this. I’ve tried this:
<script type="text/javascript"> $(function() {
$("#capslide_img_cont","#capslide_img_cont2","#capslide_img_cont3","#capslide_img_cont4","#capslide_img_cont5","#capslide_img_cont6","#capslide_img_cont7","#capslide_img_cont8","#capslide_img_cont9","#capslide_img_cont10","#capslide_img_cont11","#capslide_img_cont12","#capslide_img_cont13","#capslide_img_cont14","#capslide_img_cont15","#capslide_img_cont16","#capslide_img_cont17","#capslide_img_cont18","#capslide_img_cont19","#capslide_img_cont20"").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
});
</script>
And this:
<script type="text/javascript">
var allBoxes=new Array("capslide_img_cont","capslide_img_cont2","capslide_img_cont3","capslide_img_cont4","capslide_img_cont5","capslide_img_cont6","capslide_img_cont7","capslide_img_cont8","capslide_img_cont9","capslide_img_cont10","capslide_img_cont11","capslide_img_cont12","capslide_img_cont13","capslide_img_cont14","capslide_img_cont15","capslide_img_cont16","capslide_img_cont17","capslide_img_cont18","capslide_img_cont19","capslide_img_cont20");
$(function() {
$("#allBoxes").capslide({
caption_color : 'white',
caption_bgcolor : '#005ca7',
overlay_bgcolor : 'orange',
border : '',
showcaption : true
});
});
</script>
Neither of which work. Any suggestions gratefully appreciated!
This will select all elements with ids that start with “capslide_img_cont”. Here is a link to the jQuery selectors documentation where you can see all the different ways to select objects: http://api.jquery.com/category/selectors/
Also you were close with your first try but here is the proper implimentation:
If you are worried about loading time I would recommend putting all of your “capslide_img_cont” elements into a div with an id, then using a selector like this (assuming the “capslide_img_count” elements are img tags):
This is a fast selector that finds the single element with the ‘capslide_img_container’ id and then finds all the img tags within it, whereas my example of [id^=’capslide_img_cont’] searches every id on the page (a class-based selector also searches the whole page).
Example HTML: