Home Forums Bee WordPress Theme Video display in lightbox from masonry portfolio

This topic contains 11 replies, has 2 voices, and was last updated by  shortninja 3 years, 10 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1764

    shortninja
    Participant

    Hi there! I spoke to you before I purchased your theme on the Theme Forest comments page regarding the possibility of having videos display larger in a lightbox when the thumbnail is clicked in masonry view. You had offered to write a little guide to help me achieve this, is that still a possibility?

    We also discussed the possibility of having videos featured in a sortable “multi-media” masonry portfolio option (photos, video and audio etc) where each media opens in a lightbox when the thumbnail is clicked (just like the photos do in your current masonry portfolios). Here is an example of another theme that offers this feature that I would like to implement into your theme so you can see what I’m referring to: http://themes.themegoods.com/?theme=Nero

    Would you be able to direct me as to how I can achieve this?

    Thanks so much for your time & consideration!

    p.s.Your theme ROCKS!!!!

    #1766

    BWSM
    Keymaster

    Hi

    Sure,

    http://themeforest.net/author_dashboard#comment_5339845

    The Video Type post can be played in masonry blog list module ( screenshot: http://d.pr/i/OXN6It ). It is possible to make the video be shown in Lightbox by change a little template code. The thumbnail will be replaced the video player part in masonry list . The changing is tested by supporting Youtube and Vimeo only. The thumbnail is not supported mouseover effect(3Dflip/fold). If it is what you want, I’ll write a guide to achieve it.

    1. Replace the code: line 208-224 of bee/functions/functions-view-module.php (Screenshot: http://d.pr/i/JaDj ) as:
    <?php if(has_post_thumbnail()): ?><a href="<?php echo $post_option_textarea_embeded; ?>" class="lightbox" title="<?php the_title(); ?>"><img alt="<?php the_title(); ?>" src="<?php echo $thumb_src_360[0]; ?>" ></a><?php endif; ?>

    2. Add new page / Switch to Page Builder / Choose module / Blog / edit the blog module / Masonry list

    Select a category. Make sure there are the video posts in the selected category. (Screenshot: http://d.pr/i/wHKo )

    Don’t forget paste the Vimeo or Youtube emebed code in video post: http://d.pr/i/uUYm

    • This reply was modified 3 years, 10 months ago by  BWSM.
    • This reply was modified 3 years, 10 months ago by  BWSM.
    #1767

    shortninja
    Participant

    Thanks for the speedy response! So… i replaced the code and followed all your directions exactly but the featured image thumbnail (added in the video post) comes up as a broken image and when clicked goes to a broken page. Am I missing something?

    #1768

    shortninja
    Participant

    I started all over and tried it again just to make sure it wasn’t my fault but I got the same result and it’s still not working. If I don’t upload a featured image, the space just appears empty. If I do put in a featured image it shows as a broken image (see screenshot: http://www.shannonames.com/dev2/wp-content/uploads/2013/12/screenshot_videopost_broken.jpg).

    Either way it doesn’t show a thumbnail nor does it link to a lightbox containing the video.

    (The text link below the post links to the post page, but that’s about it.)

    Here is a screenshot of the code so you can see that I replaced it according to your directions: http://www.shannonames.com/dev2/wp-content/uploads/2013/12/code_screenshot.jpg

    And another screenshot of the video post page so you can see I didn’t forget to past the vimeo link: http://www.shannonames.com/dev2/wp-content/uploads/2013/12/Videopost.jpg

    Let me know if you need any other info from me. Thanks in advance for the help on this 🙂

    • This reply was modified 3 years, 10 months ago by  shortninja.
    #1781

    BWSM
    Keymaster

    Sorry, the quotes wasn’t displayed correctly in step 1, I changed it now, please replace the code again: ( http://www.uiueux.com/forums/topic/video-display-in-lightbox-from-masonry-portfolio/#post-1766 )

    If it still does not work, please leave your wp-admin url/user name/ password by “Set as private reply”. I’ll login your wp-admin to check.

    Best!

    • This reply was modified 3 years, 10 months ago by  BWSM.
    #1783

    shortninja
    Participant
    This reply has been marked as private.
    #1784

    shortninja
    Participant

    xx

    • This reply was modified 3 years, 10 months ago by  shortninja. Reason: forgot to set to private ;)
    #1785

    shortninja
    Participant
    This reply has been marked as private.
    #1789

    BWSM
    Keymaster

    HI,

    I met the “Internal Server Error” in your site too.
    please unzip the attached file and upload it to functions folder by FTP

    Best

    #1792

    shortninja
    Participant

    Sweet! It works!! Thank you 🙂 Is there any way to adjust the size of the lightboxes? I looked in the code you sent but I couldn’t locate the place to list the ratio.

    Thanks again!!

    #1799

    BWSM
    Keymaster

    1) Please download the attached file and unzip it as jquery.lightbox.min.js:

    2) change line 125-132, change the width/height value as you want:

            flash        : {
              width  : 640,
              height : 360
            },
            iframe       : {
              width  : 640,
              height : 360
            },

    3) upload and replace the js file to your theme folder(\wp-content\themes\bee\js\lightbox)

    Best!

    • This reply was modified 3 years, 10 months ago by  BWSM.
    #1823

    shortninja
    Participant

    Yay!! Works perfectly!!! I love it!! Thanks so much!! 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.