Question

让我先从几个限定词开始。我是Javascript / jQuery的初学者，所以这一切都是一次很棒的学习经历，我发现Stack Overflow社区不仅仅是非常有帮助。

我通过Google和Stack Overflow的搜索功能进行了大量研究。

手头的问题是我有一个工作的jQuery脚本（由Stack Overflow成员设计的单选按钮“切换器”）然后我尝试实现一个Shadowbox脚本来放大图库中的图像...但是这两个人放在一起时似乎并不喜欢彼此。

我认为这与冲突的rel标签有关。大多数脚本似乎运行正常（没有找到错误），唯一的问题是单击时我的图像没有显示。图像通常只有一个黑框（虽然图像丢失，但大小似乎是正确的。）

所有图像/ js文件都在正确的目录中，所以我已经排除了这一点。如果有人对图像没有出现的原因有任何建议，我将非常感激。谢谢！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">

<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
Shadowbox.init();
</script>

<script type="text/javascript">
jQuery.noConflict();

(function(jQuery){jQuery(function(){ 

jQuery('.chkbox-container :radio').on('change', function(){
  var me = jQuery(this);
  jQuery.each(jQuery('.img-container img'), function(i,v){
    var theShow = jQuery(v).attr('rel');
    theShow = theShow.split(' ');
    if(jQuery.inArray(me.val(), theShow)){
      jQuery(v).show();
    }else{
      jQuery(v).hide();
    }

  });        
});

 }); })(jQuery);

</script>


<style type="text/css">

.chkbox-container{
  float:left;
  width:95px;
}
.img-container{
  float:left;
  width:300px;
}
img{
  display:inline-block;
  width:90px;
  height:75px;
  padding:2px;
  border:1px solid black; 
  display:none;    
}

</style>

</head>
<body>

<div class="chkbox-container">
  <input type="radio" name="THEfilter[]" value="all" checked="checked" /> All<br/>
  <input type="radio" name="THEfilter[]" value="category1" /> Category 1<br/>
  <input type="radio" name="THEfilter[]" value="category2" /> Category 2<br/>
  <input type="radio" name="THEfilter[]" value="category3" /> Category 3<br/>
</div>
<div class="img-container">
  <a href="images/rufus.jpg" rel="shadowbox[gallery]" title="June 15th - Dr. Hanna's         Office"> <img src="images/rufus-small.jpg" rel="category1" />
  <a href="images/york.jpg" rel="shadowbox[gallery]" title="June 20th - Jim's House"> <img src="images/york-small.jpg" rel="category2" />
  <a href="images/rufus2.jpg" rel="shadowbox[gallery]" title="June 3rd - Steve's Ranch"> <img src="images/rufus2-small.jpg" rel="category3" />
</div>

Answer 1

所以我没有时间阅读整篇文章，但看起来this可能会涵盖类似于您面临的问题。我从中收集到，在调用jQuery函数之后你必须“重新初始化”shadowbox。再一次，不知道这是否是你需要的东西，只是看似相似的东西，并且有一个被接受和深入的答案。

Answer 2

使用类 img 删除CSS部分可以解决问题。显然（现在很明显，现在）覆盖放大图像的黑匣子通过我自己的CSS实现。

Shadowbox和jQuery冲突的照片库

2 个答案: