Shadowbox and jQuery Conflict for photo gallery

StackOverflow https://stackoverflow.com/questions/11728061

Pregunta

Let me begin with a few qualifiers. I am a beginner when it comes to Javascript/jQuery, so all of this is a great learning experience and I've found the Stack Overflow community to be nothing less than EXTREMELY helpful.

I have done a fair amount of research via Google and Stack Overflow's search feature.

The issue at hand is that I have a working jQuery script (the radio button "switcher" designed by a member of Stack Overflow) and then I tried to implement a Shadowbox script to enlarge the images in the gallery...but the two don't seem to like each other when put together.

I believe this has something to do with conflicting rel tags. Both scripts for the most part seem to be running fine (no errors to be found), the only issue is that my images aren't showing up when clicked on. There is only a black box where the image would normally be (and the size seems to be correct, although the image is missing).

All images/js files are in the correct directory, so I have ruled that out. If anyone has any suggestions as to why the images aren't showing up, I'd be greatly appreciative. Thanks!

<!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>

​

¿Fue útil?

Solución 2

Removing the part of the CSS with class img did the trick. Apparently (and obviously, now) the black box covering the enlarged image was put into place via my own CSS.

Otros consejos

So I didn't have the time to read through this whole post, but it looks like this might cover something similar to the problem you're facing. I gathered from it that you have to "re-init" shadowbox after the function call to jQuery. Again, no idea if this is what you need, just something that seemed similar and had an accepted and in-depth answer.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top