Pass "slide" inside the lightbox

Question

Clicking on a link opens a lightbox with the product information clicked, however there is need to display more than one "page" in that lightbox. How to insert more "pages" to move on/back to lightbox?

Example of a 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>

Clicking on it opens:

<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>

And through arrows < > in this div above should appear another div of this but with another product, this occurring in lightbox.

Lightbox By clicking on the arrows, you will move to another screen in the lighbox with image and text, like this one. The 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>

Answer 1

Well, what I would do is set a common id for the content div and the button for it.

Thus, when the user clicks the button, the div with the same id of this button will receive a fadein() and the others an Hide(), see below:

$('div#botao').on('click', function(){
 var id = $(this).attr('id');
 $('div.conteudo').hide();
 $('div#'+id).fadeIn('slow');
});