Fancybox custom div show/hide

  • I have a custom post type in WordPress that creates a gallery of images (unordered list) that open in fancybox. I created a dynamic div of a sold label within the fancybox JavaScript that appears on the left corner of the image in the lightbox across from the close button. I only want the label to show if the image is within the category “sold”. Is there a way to do this?

    To create the button I added this code within the FancyBox Javascript:
    label : '<div id="sold-label" class="sold-label"><h2>Sold</h2></div>',
    and

    if (current.label) {	  $(current.tpl.label).appendTo(F.skin).bind(function(e) {
});
}

    I thought perhaps there is a way to look for a class on the front end and if that class is present display the label div? I tried below but it didn’t work.

    if ($('.sold').length) {
$('#sold-label').css('display', 'block');
}

Viewing 1 replies (of 1 total)
  • Thread Starter PDidee

    (@pdidee)

    For anyone who is interested, I figured this out on my own. I added the category slug to the fancybox link class like this:
    <?php theme_get_categories($post->ID, 'gallery_category', ' ', 'slug'); ?>

    Then I created a fancybox helper for that class in my javascript file that creates a new wrapper for that class like this:

    tpl: {
  wrap     : '<div class="fancybox-wrap fancybox-desktop fancybox-type-image fancybox-opened" tabIndex="-1"><div class="fancybox-skin"><div id="sold-label" class="sold-label"><h2>Sold</h2></div><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
 },
Viewing 1 replies (of 1 total)
  • The topic ‘Fancybox custom div show/hide’ is closed to new replies.