1

让我从几个限定词开始。我是 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>

​​​

4

2 回答 2

0

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

于 2012-07-30T19:21:11.093 回答
0

使用类img删除 CSS 的一部分就可以了。显然（显然，现在）覆盖放大图像的黑框是通过我自己的 CSS 放置的。

于 2012-07-31T15:34:56.103 回答