Fancybox 2 How to add custom column on the side of the picture

Question

I am building a gallery and started playing with fancyBox 2. It is pretty cool, I only have one problem. I want to split fancyBox into two columns, one for image and another one for comments. I want the picture to be on the left side, and comments to be on the right.

I have tried using bootstrap rows/columns but it does not seem to work. This is what I tried:

$(document).ready(function() {
  $(".fancybox").fancybox({
    tpl: {
      image : '<div class="container-fluid"><div class="row"><div class="col-lg-9"><img class="fancybox-image" src="{href}" alt="" /></div><div class="col-lg-3">Comments will go here</div></div></div>',
    }
  });
});

I have also tried playing with other fancyBox template sections such as wrap. I tried to adding columns there but I did not achieve what I wanted.

I have also tried loading the fancyBox using ajax like this:

href : "test.php",
type : 'ajax',
ajax: {
    type: "POST",
    data: {
        temp: "tada"
    }
},

And this is a content of php file:

$template = "";
$template .= '<div class="container">';
$template .= '<div class="row">';
$template .= '<div class="col-lg-9">';
$template .= '<img class="fancybox-image img-responsive" src="http://image.com/theimage.jpg">';
$template .= '</div>';
$template .= '<div class="col-lg-3">';
$template .= 'Comments go here';
$template .= '</div>';
$template .= '</div>';
$template .= '<div>';
echo $template;

But this does not resize the box properly - here is the screenshot:

I have been playing with this all day and searched everywhere but did not found any solution.

Thanks

Answer 1

I would probably avoid bootstraps on this one, except for maybe the "img-responsive" tag. This will give the functionality I believe you are after.

 html, body{ width: 100%; height: 100%; } .fancyBox{ position: inherit; margin: auto; width: 50%; height: 50%; } .images{ float: left; height: 100%; width: 70%; background-color: green; } .comment{ float: right; height: 100%; width: 30%; background-color: red; }

  <!DOCTYPE html> <html> <head> <title>Fancy Box</title> </head> <body> <div class="fancyBox"> <div class="images"> </div><div class="comment"></div> </div> </body> </html>

Fancybox 2 How to add custom column on the side of the picture

Question

1 answers

solution1
0 2016-03-21 15:11:13

Fancybox 2 How to add custom column on the side of the picture

Question

1 answers

solution1 0 2016-03-21 15:11:13

solution1
0 2016-03-21 15:11:13