Lightbox Ultimate – Set up several videos on one page

[carpediem]

I just purchased WPLightbox Ultimate and I have a question.

I need to set up my page with several videos. Three horizontally and five vertically like in the example page below. Can you tell me what’s the best way to set it up so they all look organized on one page.

http://businessmobilewebsite.com/tutorials/qr-codes/

Your prompt response will be appreciated!

Thanks, Pervaiz

[admin]

The lithbox plugin simply makes your anchor text or anchor image popup the video. What this means is that you can still arrange your anchor images or text the same way you would arrange any normal image or text in your WordPress editor (you can wrap the shortcode in any kind of CSS to position it where ever you want).

[carpediem]

Please help! I don’t understand what you mean by wrapping the short code. I don’t see any images in my text editor that I can drag and move around.

Here’s what I’m trying accomplish. I have created this page displaying the different videos, http://qrcodefantastiko.com/qrcode-applications/ . They are displayed vertically. I’d like to show all of them, 3 horizontally and 4 vertically like the ones displayed on this page, http://businessmobilewebsite.com/tutorials/qr-codes/ so the viewer doesn’t having to scroll down .

[admin]

Do the following exercise first…

1. Create a new WordPress page (just for testing)

2. Forget about the lightbox ultimate plugin for now.

3. Just embed/place/organize 9 images (just the images) however you want it to display on the page. Remember, you are simply using the WordPress editor to place 9 images on this page however you want.

4. Now post a link to that page where you have the images so I can go and check it out.

[carpediem]

Thanks for getting back to me “Key Master”.

I just added 9 images on a test page. 3 across and 3 down.

Here’s the link, http://careydegryse.com/?page_id=4

[admin]

We modified our plugin slightly to accommodate this better. Please do the following:

1. Deactivate and delete the currently installed version of the plugin(s).

2. Download a fresh build of the plugin(s) from here:

https://support.tipsandtricks-hq.com/update-request

3. Upload and activate this version of the plugin(s).

4. Open the “wp_lightbox_ultimate_custom.css” file from this plugin’s folder and search for the following code block:

.lightbox_ultimate_image_anchor

{



}

Once you find it change it to the following:

.lightbox_ultimate_image_anchor

{

float:left;

}

That should make it to where all your anchor images will stack side by side and go to the next line when it reaches the width of the page.

Obviously you can add more customized CSS to add margin, border, padding etc to the anchor image.

[carpediem]

Good Evening my Friend!

I deactivated and deleted the old plugin, installed the new plugin and made the changes to the custom.css and this is how far I got. I don’t mind paying a few bucks if someone can help me out.

http://qrcodefantastiko.com/qrcode-applications/

[wpCommerce]

Hi, you are using an additional text for each shortcode (e.g. – “What are QRCodes anyway?”, “QRCodes on iPhone” etc). That’s why “float:left” attribute is causing the text to stack on the image. In your case it’s better if you use you own custom div for each shortcode. So please do the following steps:

1. Keep the “lightbox_ultimate_image_anchor” class empty like before (in the “wp_lightbox_ultimate_custom.css” file). For example –

.lightbox_ultimate_image_anchor

{



}

2. Now go to the page where you have all the shortcodes embedded.

3. Switch to “HTML view” (in the page editor)

4. Wrap each shortcode and the text within a div. For example –

<div style="float:left;">

What are QRCodes anyway?

[shortcode for the lightbox video goes here]

</div>

<div style="float:left;">

QRCodes on iPhone

[shortcode for the lightbox video goes here]

</div>

<div style="float:left;">

QRCodes on Android

[shortcode for the lightbox video goes here]

</div>

................

do this for all other shortcodes

Let me know how it goes.

[Lstella]

I am working on the same type of problem. The only diff is I want text links stacked horizontally instead of vertically. I have followed your suggestions and I am “almost” there. The links are next to each other but they look like one loooong underlined link instead of separate links. How can I put space between each link. Also, why in the WORLD does WP keep adding <p> to everything. I have huge empty spaces that I don’t want. The code I used from your suggestion is below and the page I am working on is: http://usasfrules.com/level-1/

<div style=”float:left;”>[wp_lightbox_prettyPhoto_anchor_text_video link=”http://www.youtube.com/watch?v=_3HQrGKmf_A&#8221; width=500 height=400 text=”L1 5GenTumA ILLEGAL1″ description=”Illegal” class=”my_test_class”]</div>

<div style=”float:left;”>[wp_lightbox_prettyPhoto_anchor_text_video link=”http://www.youtube.com/watch?v=op4mSFRR-3U&feature=youtu.be&#8221; width=500 height=400 text=”L1-5GenTumA-ILLEGAL2″ description=”Illegal” class=”my_test_class”]</div>

</p>

[wpCommerce]

Your theme’s style.css(line 27) has the following css definition for any HTML “a” element –

a {

color: #1D336D;

text-decoration: underline;

}

That’s why all the links are underlined.

For the shortcodes please try this in the HTML view of the editor –

<div style="float:left;padding:5px;">

[wp_lightbox_prettyPhoto_anchor_text_video link="http://www.youtube.com/watch?v=_3HQrGKmf_A&feature=youtu.be" width=500 height=400 text="L1 5GenTumA ILLEGAL1" description="Illegal"]

</div>

<div style="float:left;padding:5px;">

[wp_lightbox_prettyPhoto_anchor_text_video link="http://www.youtube.com/watch?v=op4mSFRR-3U&feature=youtu.be" width=500 height=400 text="L1-5GenTumA-ILLEGAL2" description="Illegal"]

</div>

<div style="clear:both;"></div>

Let me know how it goes.

[Lstella]

I don’t know if anyone has told you guys lately but you all are AMAZING. That worked and was exactly what I was looking for. Thank you,Thank you,Thank you,Thank you!!!!

By the way, I will always look to your site first when looking for new plugins.

Last night, I went ahead and purchased the eMember Plugin so I am sure I will be in touch soon.

Les

[wpCommerce]

You’re welcome. I’m glad that it worked for you

[wpCommerce]

Just an update if anyone want to take a look at it:

http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/how-to-organize-and-group-multiple-lightbox-anchor-images-in-a-post-or-page-130

[Author]

Posts