5

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 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>
4
  • pergunta: 1 - está usando plugin? se sim qual? é jquery? 2 - poste seu código js 3 - o que é renderizado no html? 4 - poste um print de como fica se possivel Commented 26/11/2015 às 14:43
  • A pergunta não está clara, publique seu código no jsfiddle.net para que possamos analisar melhor o que pretendes. Commented 26/11/2015 às 15:34
  • 1
    Editei e postei uma imagem e o js ...mas vou colocar no jsfiddle.net para facilitar.
    – user49915
    Commented 26/11/2015 às 16:21
  • jsfiddle.net/x1m5x0p8/3 No html terão os comentários Modal Embalagem01 e Modal Embalagem02... Cliquem no texto na vertical Lustra Embalagem01, abrindo esse lightbox(Modal Embalagem01), era para poder passar para outro lightbox (Modal Embalagem02) atraves de seta
    – user49915
    Commented 27/11/2015 às 1:51

1 Resposta 1

0

Bem, o que eu faria seria definir um id em comum para a div do conteúdo e o botão referente à mesma.

Dessa forma, quando o usuário clicar no botão, a div com o mesmo id desse botão receberá um fadeIn() e as demais um hide(), veja abaixo:

$('div#botao').on('click', function(){
 var id = $(this).attr('id');
 $('div.conteudo').hide();
 $('div#'+id).fadeIn('slow');
});
1
  • coloquei aqui jsfiddle.net/x1m5x0p8/3 No html terão os comentários Modal Embalagem01 e Modal Embalagem02... Clique no texto na vertical Lustra Embalagem01, abrindo o lightbox(Modal Embalagem01), era para poder passar para outro lightbox (Modal Embalagem02) atraves de seta, como indiquei na imagem acima aqui na page. Valeu !
    – user49915
    Commented 27/11/2015 às 1:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .