Video display in lightbox from masonry portfolio

[shortninja]

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!!!!

[SeaTheme]

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

[shortninja]

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?

[shortninja]

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 🙂

[SeaTheme]

Sorry, the quotes wasn’t displayed correctly in step 1, I changed it now, please replace the code again: ( https://seatheme.net/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!

[shortninja]

This reply has been marked as private.

[shortninja]

xx

[shortninja]

This reply has been marked as private.

[SeaTheme]

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

[shortninja]

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!!

[SeaTheme]

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!

[shortninja]

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

[Author]

Posts