Move "slide" into lightbox

Question

Move "slide" into lightbox

Navigation

#1 by (0 votes)

5

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

Sample 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 should appear another div of this however with another product, this happening in lightbox.

Lightbox Clickingonthearrowswillmoveyoutoanotherscreeninthelighboxwithimageandtext,likethisone.Ojs:

<script>$(document).ready(function(){//ExamplesofhowtoassigntheColorboxeventtoelements$(".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>

javascript

asked by anonymous 26.11.2015 / 15:36

1 answer

Could not create a constant value of type 'System.Object'. Only primitive types or enumeration types are supported in this context Create divs dynamically

score 0 · Answer 1

Well, what I would do would be to define a common id for the content div and the button for it.

This way, when the user clicks the button, the div with the same id of this button will receive a fadeIn () and the others hide (), see below:

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