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" title="June 15th - Dr. Hanna's Office"> <img src="images/rufus-small.jpg" rel="category1" />
<a href="images/york.jpg" rel="shadowbox" title="June 20th - Jim's House"> <img src="images/york-small.jpg" rel="category2" />
<a href="images/rufus2.jpg" rel="shadowbox" title="June 3rd - Steve's Ranch"> <img src="images/rufus2-small.jpg" rel="category3" />
</div>
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.