Masonry and Fancybox for 2.0
Started by
khero
, Dec 19 2011 04:50 PM
8 replies to this topic
#1
Posted 19 December 2011 - 04:50 PM
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!
#2
Posted 19 December 2011 - 04:51 PM
Can we see it mid-explode?
#3
Posted 20 December 2011 - 02:24 PM
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:
#4
Posted 20 December 2011 - 02:59 PM
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.
#5
Posted 20 December 2011 - 03:00 PM
You just need a class added to the post_thumb?
#6
Posted 20 December 2011 - 03:46 PM
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
also masonry worked perfectly.
#7
Posted 20 December 2011 - 03:48 PM
If the images just need a class added, you can just use a wordpress filter to add that class.
#8
Posted 20 December 2011 - 04:09 PM
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
#9
Posted 20 December 2011 - 10:12 PM
You can also add a class to something using jQuery pretty easily. For example:











