How to adjust an image in fancybox2?

Question

How to adjust an image in fancybox2?

Navigation

#1 by (2 votes)

3

I'm using Fancybox2, could someone help me to adjust an image so that it is displayed completely without scrolling to see it all?

My image when opened with Fancybox is displayed like this:

My code in Fancybox is this:

$(document).ready(function() {
  $(".fancybox").fancybox({
      'width':980,
      'height':980,
      'type':'iframe',
      'autoScale':'false',
      'titleShow': 'true',
      'position': 'auto',
      helpers : { 
        overlay: {
          'transparent':'true',
          opacity: 0.8, // or the opacity you want 
          css: {'background-color': 'rgba(0, 255, 255, 0.2)',} 
        } // overlay 
      } // helpers
   });
  });

I use that height and that width to be able to visualize it well but it does not fit, any advice?

jquery html css

asked by Alejandro Ruiz 13.05.2016 в 20:47

source

1 answer

Problem when registering a product Modify data from a java CSV file

score 2 · Accepted Answer

You are using the incorrect% type , try using image . Here are some examples with different image sizes.

400x400 image:

$(document).ready(function() {
$(".fancybox").fancybox({
  'type':'image',
  'title': 'Imagen de 400x400',
  'titleShow': 'true',
  'helpers' : { 
      'overlay': {
          'transparent':'true',
          'opacity': 0.8,
          'css': {'background-color': 'rgba(0, 255, 255, 0.2)',} 
    } 
  } 
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<a class="fancybox" href="http://placehold.it/400x400" style="max-width: 350px;">
    Imagen
</a>

800x800 image:

$(document).ready(function() {
$(".fancybox").fancybox({
  'type':'image',
  'title': 'Imagen de 800x800',
  'titleShow': 'true',
  'helpers' : { 
      'overlay': {
          'transparent':'true',
          'opacity': 0.8,
          'css': {'background-color': 'rgba(0, 255, 255, 0.2)',} 
    } 
  } 
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<a class="fancybox" href="http://placehold.it/800x800" style="max-width: 350px;">
    Imagen
</a>

1200x1200 Image:

$(document).ready(function() {
$(".fancybox").fancybox({
  'type':'image',
  'title': 'Imagen de 1200x1200',
  'titleShow': 'true',
  'helpers' : { 
      'overlay': {
          'transparent':'true',
          'opacity': 0.8,
          'css': {'background-color': 'rgba(0, 255, 255, 0.2)',} 
    } 
  } 
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<a class="fancybox" href="http://placehold.it/1200x1200" style="max-width: 350px;">
    Imagen
</a>