我不想受css影响的图像受其影响

时间:2017-06-17 12:27:34

标签: jquery html css

我真的很沮丧,所以请帮助我。

我正在为我的学校项目创建一个网站,并且我想要进行缩放,我发现以下代码放在head上。

<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; 
        } 
    </style>

然后放入正文的代码:

<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 = false;
                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>

当我点击每个可以缩放的图像时,是什么呢,但问题是我的页面上的徽标也是一个图像,当我把这个代码放在那里时,徽标就会掉下来我可以&#39 ; t单击它转到主页,因为它也会在我点击时缩放。

有没有像css取消或类似的东西?

如果没有,请帮助我。

先谢谢,

欢呼。

1 个答案:

答案 0 :(得分:0)

问题在于这一行:

$(addToAll ? 'img' : 'img.fancybox').each(function(){

因为addToAll为真,所以它会将fancybox(“缩放”)添加到所有图像。

你可以改变的是

var addToAll = true

var addToAll = false

然后在您的HTML中,您需要更改要缩放的图像,以便它们具有class="fancybox,如下所示:

<img src="logo.png">
<img src="zoomthis.jpg" class="fancybox">

第一张图片不会在Fancybox中打开,第二张图片将会打开。