[Plugin: Easy FancyBox] Applying Fancybox class to elements using jquery

  • Resolved aletsan

    (@aletsan)


    12 years, 4 months ago

    I recently decided to use HungryFEED to display some news feeds on a site I am creating. As I already used Easy Fancybox to provide effects for galleries and external links, I thought I could do the same for the links of the news feed articles.
    As HungryFEED just provides a way to reformat an already formatted feed, the ‘a’ tags classes have to be changed to include the ‘fancybox iframe’ class.
    I have found a way to do it using jquery in the custom CSS code of HungryFEED (with the kind help of the creator of course):

    <script type="text/javascript">
 jQuery(document).ready(function($) {
  $('.hungryfeed_item a').attr("target", "_blank");
  $('.hungryfeed_item a').addClass("fancybox iframe {width:930,height:680}");
 });
</script>

    The change of target attribute works fine, but the class addition does not make the link open in a fancybox iframe as I thought it would.
    I suspect it is because the class must be declared in the creation of the link, and not applied afterwards dynamically using jquery.
    Is my suspicion correct? Or there is something else/more that I am missing in this case?
    I am not an experienced html/php/script programmer so I could use some help. Using fancybox to present feed links with the formating options that HungryFEED is giving, is going to be a very effective combination.

    http://wordpress.org/extend/plugins/easy-fancybox/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter aletsan

    (@aletsan)

    12 years, 4 months ago

    The solution for using fancybox iframe on feed links turned out to be twofold:

    <script type="text/javascript">
 jQuery(document).ready(function($) {
  $('.hungryfeed_item a').attr("target", "_blank");
  $('.hungryfeed_item a').addClass("fancybox iframe {width:930,height:680}");
  $('.hungryfeed_item a').fancybox({
    'centerOnScroll' : 'true',
    'content':$(this).attr('src')
  });
 });
</script>

    1. Add the fancybox class I needed for the link (with parameters for the iframe case)
    2. Actually “perform the action” when the link is clicked

    Problem solved.

    HungryFEED and fancybox combination makes a really nice effect …

    Rolf Allard van Hagen

    (@ravanh)

    12 years, 4 months ago

    Adding the class dynamically is fine, just as long as this takes place BEFORE the actual fancybox() call itself. I suppose in your case using HungyFEED this happened in the reverse order.

    Your solution (an extra fancybox() call targeted specifically at these links) is excellent. Thanks for sharing 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Plugin: Easy FancyBox] Applying Fancybox class to elements using jquery’ is closed to new replies.