Can anyone help me turn off FancyBox on certain images? I've tried a million different options here but haven't made much progress. The images I'm working on are in the WowSlider banner here: http://www.freemanfoxx.com. The problem, as you'll see is that some images have no href location and when they are clicked fancy box is loading an error page. If we could either change the class dynamically or do something else to stop fancybox from loading that would be a miracle.
Thank you!!!!
Images are loade开发者_如何学Pythond dynamically via PHP:
if (empty($descr)){
echo "<a href='#'>";}
else {
echo "<a rel=group1 href=";
echo $descr;
echo " target=_blank>"; }
?><img src="<?php echo $wpimage[0]; ?>" width="<?php echo $wpimage[1]; ?>" height="<?php echo $wpimage[2]; ?>" alt="" title="" id="wows<?php echo $image->ID; ?>">
<?php
if (empty($descr)){
echo "</a>";}
else {
echo "</a>";}
FancyBox Loads based on:
$("a.wow-fancy").fancybox({
'hideOnContentClick': true,
'width': 895,
'height': 600,
'type': 'iframe'
});
The class "cs-wowslider-images-new" is added to the images via javascript through this file: http://freemanfoxxrealty.com/wp-content/themes/freemanfoxx/js/2wows-squares.js
UPDATE
I think I might be able to accomplish this by dynamically removing a class but it doesn't seem to be working.. any thoughts?
if(("a.wow-fancy").attr('href') = "#"){
$(this).removeClass("wow-fancy");
alert('hi');
}
One option is:
Change the PHP to not include the href
tag at all, if the $descr
is empty (if that works for you). Then:
$('a[href].cs-wowslider-images-new').fancybox({...
Sort of like this: http://jsfiddle.net/q9Tpd/
If you're able to edit the html, you could always add a class-name to the images you don't want to use fancybox on and use the selector:
$("a.cs-wowslider-images-new:not('.noFancyBoxOnThisClassName')").fancybox({
'hideOnContentClick': true,
'width': 895,
'height': 600,
'type': 'iframe'
});
Edited in response to question edits by OP.
To test whether the href
is merely '#'
and, if it is, remove the wow-fancy
class:
$('a.wow-fancy').each(
function(){
if (this.href == '#') {
$(this).removeClass('wow-fancy');
}
});
In my condition:
$('.content img')
.not('[hidden]')
.not('.group-picture img, .post-gallery img')
.not('.no-fancybox')
.each(function () {
var $image = $(this);
var imageTitle = $image.attr('title');
var $imageWrapLink = $image.parent('a');
if ($imageWrapLink.size() < 1) {
var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');
$imageWrapLink = $image.wrap('<a href="' + imageLink + '"></a>').parent('a');
}
$imageWrapLink.addClass('fancybox fancybox.image');
$imageWrapLink.attr('rel', 'group');
if (imageTitle) {
$imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');
//make sure img title tag will show correctly in fancybox
$imageWrapLink.attr('title', imageTitle);
}
});
$('.fancybox').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
Just add that .not('.no-fancybox')
, and later add the no-fancybox
class to the <img>
tag you do not need fancybox could be OK.
Actually, this pice of code comes from Hexo blog theme NexT (themes/next/source/js/src/utils.js
)
精彩评论