javascript - 单击时如何在灯箱中对齐图像

Question

我试图在单击时将图像右对齐。我有一个灯箱脚本，但不知道如何将图像从中心向右移动。

这是脚本:

<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
    border: none;
    -o-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
} 
a.fancybox:hover img {
    position: relative; 
    z-index: 999; -o-transform: 
    scale(1.03,1.03); 
    -ms-transform: scale(1.03,1.03); 
    -moz-transform: scale(1.03,1.03); 
    -webkit-transform: scale(1.03,1.03); 
    transform: scale(1.03,1.03);
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
    $(function($){
        var addToAll = true;
        var gallery = true;
        var titlePosition = 'inside';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
            $this.wrap(a);
        });
        if (gallery)
            $('a.fancybox').attr('rel', 'fancyboxgallery');
        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
    $.noConflict();
</script>

如有任何帮助，我们将不胜感激。另外，如果有办法让灯箱覆盖整个页面，那也很酷。

提前致谢。

Answer 1

在 css 中尝试以下内容

#fancybox-wrap{
    left:auto !important;
    right:0 !important;
}

$(function($) {
  var addToAll = true;
  var gallery = true;
  var titlePosition = 'inside';
  $(addToAll ? 'img' : 'img.fancybox').each(function() {
    var $this = $(this);
    var title = $this.attr('title');
    var src = $this.attr('data-big') || $this.attr('src');
    var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
    $this.wrap(a);
  });
  if (gallery)
    $('a.fancybox').attr('rel', 'fancyboxgallery');
  $('a.fancybox').fancybox({
    titlePosition: titlePosition
  });
});

    a.fancybox img {
      border: none;
      -o-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
    }
    a.fancybox:hover img {
      position: relative;
      z-index: 999;
      -o-transform: scale(1.03, 1.03);
      -ms-transform: scale(1.03, 1.03);
      -moz-transform: scale(1.03, 1.03);
      -webkit-transform: scale(1.03, 1.03);
      transform: scale(1.03, 1.03);
    }
    #fancybox-wrap {
      left: auto !important;
      right: 0 !important;
    }

<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<section class="main clearfix">
  <section class="top">
    <div class="wrapper content_header clearfix">
      <div class="work_nav">
        <h1 class="title">Map Gallery</h1>
      </div>
  </section>
  <!-- end top -->

  <section class="wrapper">
    <div class="content">
      <p align="center">Click to enlarge any map.</p>
      <ul id="movieposters">
        <li>
          <img class="fancybox" src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" width=200px height=200px />
        </li>
        <li>
          <img class="fancybox" src="https://risehighershinebrighter.files.wordpress.com/2014/11/magic-of-blue-universe-images.jpg" width=200px height=200px />
        </li>

      </ul>
    </div>
    <!-- end content -->
  </section>
</section>
<!-- end main -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>