• 0
Sign in to follow this  
Followers 0

Masonry and Fancybox for 2.0

Question

Posted · Report post

Hi, I'm trying to implement jQuery Masonry and Fancybox (kinda Lightbox) in my site. I've used these technologies before without Pagelines and they've always worked great. I'm having some problems now with trying to make them work with Pagelines Dev 2.0. I've tried putting the basic scripts and links to scripts in the custom-code/head box or in the functions.php page through the customize plugin but it doesn't work. Also, it makes my layout explode. Any quick way/tutorial to insert these basic features? Thanks a mil!

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

Can we see it mid-explode?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No sorry, can't post it right now. But anyway, i'm concentrating on fancybox right now. I've followed al the video tutorials on how to create a custom section in php and how to get the browser to load my scripts in the section. I've placed a test picture but when i click it seems like the fancybox script doesn't get triggered. It just opens the large image in the same page. What i did was: - create a new section folder through template and placed it in the "pagelines-sections" folder of the customize plugin; - created a FancyboxSetion class; - added "section_styles" and loaded the scripts via "wp_enqueue_script"; - placed the fancybox script in "section_head"; - added a plain image/link in "section_template" with the ".group" class needed to trigger fancybox. Did i miss something? I really wished there was a template for this already included in 2.0. I think lightbox/fancybox tools are nowadays a core part of websites. My final goal would be to then create a custom loop where i can trigger fancybox when the user click on the post's thumbnail. A bit like this guy did: http://themes.premiumpixels.com/gridlocked/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ok, i think i went too far trying to do my own thing. just found a plugin for wordpress... duh! only problem is it works for normal images but not for the post thumbnail. any quick advice on how to edit the postloop in 2.0 to add the trigger to the thumbs? i used to have platform 1.5 and it was very easy to edit the postloop page. with 2.0 i find it very difficult to see the html used around the php to call the queries.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You just need a class added to the post_thumb?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i found the file called "class.posts.php". it's very different from the past where there was more fixed html that could be handled, while now i have a string of variables. i tried adding a fixed class called ".fancyboxgroup" (which is the trigger for the plugin), but of course if opens the post page in the fancybox and not the larger image. sounds like i would need to do more than adding just a class. i would have to change also the href of the link, but dinamically for each post. sounds like a nightmare. programming my own cms would have been easier! i've managed with my old site, not in worpress or pagelines, and it worked fine. in that case i could also add more hidden images in order to link them to the same collection and have a little slideshow of 4-5 pictures per project. i wouldn't know how to do that here now. guess i should just go back to plain html for my portfolio O_o http://www.marcovalentini.biz also masonry worked perfectly.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If the images just need a class added, you can just use a wordpress filter to add that class.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i really don't think i can do what i did on my portfolio just by adding a class. i think i'm just gonna drop pagelines for this one ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can also add a class to something using jQuery pretty easily. For example: [code] jQuery(function(){ jQuery('.myimage').addClass('fancybox'); }); [/code]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0