Clicando em um link, abre um lightbox com as informações do produto clicado, no entanto há necessidade de exibir mais de uma "página" nesse lightbox. Como inserir mais "páginas" para avançar/voltar no lightbox?
Exemplo de um link: product01
<div class="col-md-6"><a href="#" data-toggle="modal" data- target="#product01"><p style="float:left; transform: rotate(-90deg); transform-origin: left top 0; height:10px; white-space:nowrap; margin:165px -20px 0 -10px; width:40px; height:10px; font-weight:bold">Creme</p><img class="separator" src="img/produtos/title_separator.png"><img class="prod_link" src="img/produtos/creme.png"></a></div>
Clicando nele abre:
<div class="modal fade" id="product01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="modal-cont">
<div class="modal-img">
<img src="img/produtos/oleo_peroba_zoom.png">
</div>
<div class="modal-text">
<div class="tab-title">
<b>Creme</b> <img class="print" src="img/produtos/icon_printer.png" onclick="myFunction()">
</div>
<div style="clear:both"></div>
<p>Conserva e limpa</p>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal"><img src="img/produtos/close.png"></button>
</div>
</div>
</div>
</div>
E através de setas < > nessa div acima deveria aparecer outra div dessa porém com outro produto, isso ocorrendo no lightbox.
Lightbox Clicando nas setas, passará para outra tela no lighbox com imagem e texto, que nem essa. O js:
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#3255a7", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>