HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Fancybox Plugin for Vanilla - Feedback

13

Comments

  • 422422 Developer MVP
    edited March 2013

    an example explanation: http://stackoverflow.com/questions/9486034/how-to-create-separate-fancybox-galleries-on-the-same-page

    so you could use rel="<?php $post_ID;?>" for example ( use specific var for post id ( i made that bit up )

    There was an error rendering this rich post.

    kirkpa31
  • Thank you for your extensive reply @422! I'm excited and hope this works, I'll try this out as soon as I can.

  • I understand what you are saying, only I do not know where to paste the code to add a rel attribute to each image! Still within my default.master.php? I've been playing around with this stupid, stupid thing for 2 days now, sorry that I am not more intelligent in this topic.

  • kirkpa31kirkpa31 ✭✭
    edited March 2013

    The following two images are not in a gallery:

    < a id="single_1" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg" title="a ride in blue? (cembayir_photography)" >
    < img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg" alt="" / >
    < /a >

    < a id="single_2" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg" title="reedit... (h_di)" >
    < img src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg" alt="" / >
    < /a >


    and these two images ARE in a gallery:

    < a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" title="The Trail (Msjunior-Check out my galleries)" >
    < img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt="" / >
    < /a >

    < a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg" title="Trees (Joerg Marx)" >
    < img src="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_m.jpg" alt="" / >
    < /a >


    The 'rel="gallery1"' is what separates them into a gallery, only I DON'T KNOW how to add this feature so that each image gets one of these labeled by Post ID or some other unique ID! Ugh, this should be easy, I apologize for wasting your time...

  • 422422 Developer MVP

    if one of the guys here can help you, with how to determine the POST ID then you may be home and sorted.

    There was an error rendering this rich post.

  • That's exactly what is missing. My images currently show up with a rel attribute, but that rel attribute is not specific to each post.

  • 422422 Developer MVP
    edited March 2013

    < gimme a sec will try and find it

    so its comment id.

    like < li id="Comment_136" class="Item Comment Alt">

    Will try and find out what the var is.

    There was an error rendering this rich post.

  • 422422 Developer MVP

    i am guessing something as simple as rel="<?php $CommentID;?>"

    There was an error rendering this rich post.

  • When I add "<?php $CommentID;?>" into the code within my default.master.tpl to have it look like:

    {literal} <script type="text/javascript"> $(document).ready(function (){ $('.fancybox').attr('rel', '<?php $CommentID;?>').fancybox({ type : "image", // force type of content to image }); // fancybox }); // ready </script> {/literal}

    but this causes the image to not open at all when clicked.

  • 422422 Developer MVP
    edited March 2013

    ahh thats cos you have a tpl file.

    try {$CommentID}

    actually no, perhaps @peregrine or @x00 could help you here, as you would I think need the js version. I am pretty sure you dont need to add it to the javascript .

    Moreover somehow in the fileupload script you are using, that handles attachments.

    There was an error rendering this rich post.

  • 422422 Developer MVP
    edited March 2013

    you need to be editing: class.vanillalightbox.plugin.php

    rel="<?php $CommentID;?>"
    

    edited at line 73 add the above after the <a tag

    I added rel=commentid stuff to one line above, have a play witht hat, I am kind of a keep playing until it works kinda guy. Where as others have actual knowledge

    There was an error rendering this rich post.

    kirkpa31
  • kirkpa31kirkpa31 ✭✭
    edited March 2013

    Still no luck. Doesn't open with the brackets, opens without them for some reason. Upon inspecting the element my image shows up with the following code:

    <a class="fancybox" href="http://idenitties.com/uploads/FileUpload/64/fd56aeb690a1c77b411a7c3070bacb.jpg" rel="{CommentID}">

    <a href="http://idenitties.com/uploads/FileUpload/64/fd56aeb690a1c77b411a7c3070bacb.jpg">

    <img src="http://idenitties.com/uploads/FileUpload/64/fd56aeb690a1c77b411a7c3070bacb.jpg" alt="image"></a></a>

  • 422422 Developer MVP

    see my revised suggestion above

    There was an error rendering this rich post.

  • I'll keep playing around for now, per your suggestion, as the rel="<?php $CommentID;?>" had no effect as I can see, but it is good progress.

    I can't thank you enough @422, hopefully I figure this out soon.

  • 422422 Developer MVP

    yer , sorry I cant elp further. I would guess you dont need the <?php portion because you are within an echo. But I really dont play around with vanilla vars that often, and certainly not fancybox, as I use divbox, which I think is far superior, but you would still have same issue lol

    There was an error rendering this rich post.

  • It's no problem at all. I'm just half-glad to realize that this wasn't a simple fix that I was struggling tremendously with. Thank you for sticking with it for as long as you did!

    422
  • Looking at the formatting on this site: http://thercsite.com/pl/forum/forum_viewtopic.php?267.0

    If I have to settle, I'd be happy to get it to scroll to the other images and not pick up things like Top Posters' badges, other [img] files, etc. I'll keep you posted.

  • I've been trying to add this code to both my default.master.tpl file within my theme and my global.js file:

    jQuery('.gallery').each(function(g) { $('a', this).attr('rel', function(i, attr) { return attr + ' gallery-' + g; }); });

    Taken from this site: http://konstruktors.com/blog/wordpress/4525-add-rel-attribute-to-each-gallery-post/

    Thinking out loud right now, thanks for bearing with me everyone.

  • FIGURED IT OUT!!!!!!!!!

    AHH if I haven't learned from my own history so far, I will from this. All that code I posted above was irrelevant and I've removed it from my files. All that needed to be done, as I have realized in the past as well, was to modify the /VanillaFancybox/class.vanillalightbox.plugin.php file

    add this tiny little string of code:

    div.Options img, div#Panel img, div.CommentInfo img,

    and the images are galleried together. They are not separated by post, however, but I don't care it still looks great and no longer picks up images not related to the post.

    Ugh soooo happy.

    Thank you guys for the help along the way!

    422
  • 422422 Developer MVP

    congrats :) I am sure I pointed you to that file lol

    Well done very happy you got it figured out at least to an acceptable and tolerable level :)

    There was an error rendering this rich post.

    kirkpa31
Sign In or Register to comment.