group multiple colorbox with same parameter

Question

i actually optimise my website and i have some issue with colorbox witch make me call too many script

i actually have this

jQuery('a.Miro1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.sofia1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.MP13').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.iframeLion').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.ddopa1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.AppEnt1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.smg1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.almpn1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.kickboxing1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.saw01').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.sanggene1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.Ucreed1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.dior1').colorbox({innerWidth:900, innerHeight:800, iframe:true}); jQuery('a.Client').colorbox({innerWidth:900, innerHeight:800, iframe:true});

how can i group all of this in one please ? they all have the same parameter, just different link

thanks

Answer 1

Try this:

jQuery('a.Miro1, a.sofia1, a.MP13, a.iframeLion, a.ddopa1, a.AppEnt1, a.AppEnt1, a.smg1, a.almpn1, a.kickboxing1, a.saw01, a.sanggene1, a.Ucreed1, a.dior1, a.Client').colorbox({
    innerWidth:900, 
    innerHeight:800, 
    iframe:true
});

Or I would suggest to add a common class to all of your colorbox elements and do in one time only. like:

jQuery('a.colorBoxElms').colorbox({
    innerWidth:900, 
    innerHeight:800, 
    iframe:true
});

Answer 2

how can i group all of this in one please ? they all have the same parameter, just different link

What parameter? You can add extra class for all links and then use:

jQuery('.cbox').colorbox({ innerWidth:900, innerHeight:800, iframe:true }); 

OR group selectors:

jQuery('a.Miro1, a.sofia1, a.MP13, a.iframeLion, a.ddopa1')
   .colorbox({ innerWidth:900, innerHeight:800, iframe:true }); 

Answer 3

just look up the uncompressed version and change defaults in js file, or predefine options `

var cboxOptions = { innerWidth: 900, innerHeight:800, iframe:true } 
 jQuery('a.Miro1').colorbox(cboxOptions); 
 ...
 ... 

or the best as I see all option are the some so why not

jQuery('a.Miro1,a.sofia1,....').colorbox({innerWidth:900, innerHeight:800, iframe:true}); 

or just add one common class to all the links, you sure know you can add more classes to each element ...

<a class="Miro1 jqcbox">click me</a>
<a class="sofia1 jqcbox">click me</a>

.. then you just need to call the colorbox once for jQuery('a.jqcbox').colorbox(...