Javascript 照片库的Shadowbox和jQuery冲突_Javascript_Jquery_Html_Shadowbox_Rel

Javascript 照片库的Shadowbox和jQuery冲突

javascript jquery html

Javascript 照片库的Shadowbox和jQuery冲突,javascript,jquery,html,shadowbox,rel,Javascript,Jquery,Html,Shadowbox,Rel,让我从几个限定词开始。我是Javascript/jQuery的初学者，所以所有这些都是一次很棒的学习经历，我发现Stack Overflow社区非常有用我通过Google和Stack Overflow的搜索功能做了大量的研究目前的问题是，我有一个工作的jQuery脚本（Stack Overflow的一个成员设计的单选按钮“切换器”），然后我尝试实现一个Shadowbox脚本来放大图库中的图像……但这两个脚本放在一起时似乎并不喜欢对方我相信这与相互冲突的rel标签有关。这两个脚本在大多数情况

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

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

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

我相信这与相互冲突的rel标签有关。这两个脚本在大多数情况下都运行良好（没有发现错误），唯一的问题是单击时我的图像没有显示。图像通常只有一个黑匣子（虽然图像丢失，但大小似乎正确）

所有的images/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>


Shadowbox.init（）；
jQuery.noConflict（）；
（函数（jQuery）{jQuery（函数（）{
jQuery（'.chkbox容器：radio'）.on（'change'，function（））{
var me=jQuery（this）；
each（jQuery（'.img-container-img'），函数（i，v）{
var theShow=jQuery（v）.attr（'rel'）；
theShow=theShow.split（“”）；
if（jQuery.inArray（me.val（），theShow））{
jQuery（v.show（）；
}否则{
jQuery（v.hide（）；
}
});        
});
})；}（jQuery）；
.chkbox容器{
浮动：左；
宽度：95px；
}
.img集装箱{
浮动：左；
宽度：300px；
}
img{
显示：内联块；
宽度：90px；
高度：75px；
填充：2px；
边框：1px纯黑；
显示：无；
}
全部

类别1

类别2

类别3

所以我没有时间通读整篇文章，但它似乎涵盖了与您面临的问题类似的内容。我从中得出结论，在调用jQuery函数之后，必须“重新初始化”shadowbox。同样，不知道这是否是您所需要的，只是一些看起来相似的东西，并且有一个被接受的、深入的答案。

通过类img删除CSS的一部分就成功了。显然（现在也很明显）覆盖放大图像的黑框是通过我自己的CSS设置的。

谢谢链接。我通读了答案并收集了与您相同的信息（re init）。虽然它没有解决我的问题。不过，我可能没有正确地实现它。我正在进一步调查……没问题。我在使用bumpbox和jQuery时遇到了类似的问题，但使用jQuery.noConflict（）解决了这个问题。我对影盒不是很熟悉，尽管我认为它是类似的东西。另外，要小心像HoverZoom这样的插件，它在Chrome中为我搞乱了BumpBox。再次感谢您的输入和提示。仍在通过Shadowbox的支持页面进行研究…如果您可以链接到有问题的页面，这将有助于解决问题。