Jump to content


Photo
- - - - -

Masonry and Fancybox for 2.0


  • Please log in to reply
8 replies to this topic

#1 khero

khero

    Advanced Member

  • Members
  • 34 posts

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 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 19 December 2011 - 04:51 PM

Can we see it mid-explode?

#3 khero

khero

    Advanced Member

  • Members
  • 34 posts

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:

Please Login or Register to see this Hidden Content



#4 khero

khero

    Advanced Member

  • Members
  • 34 posts

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 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 20 December 2011 - 03:00 PM

You just need a class added to the post_thumb?

#6 khero

khero

    Advanced Member

  • Members
  • 34 posts

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

Please Login or Register to see this Hidden Content

also masonry worked perfectly.

#7 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

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 khero

khero

    Advanced Member

  • Members
  • 34 posts

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 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 20 December 2011 - 10:12 PM

You can also add a class to something using jQuery pretty easily. For example:

Please Login or Register to see this Hidden Content