Lightbox Ultimate – How do you align shortcode embed images horizontally

[tk900]

I want to align my embed images horizontally instead of vertically and with a space in between. e.g If I insert my first short code using an embed image into a post it aligns to the left now I want to insert another image with a space so that it aligns to the right of the first image.If you have a look at my post you can see how it is at the moment

[http://linkandbuild.com/jquery-lightbox]

Any ideas

Nathan

[wpCommerce]

Hi, you can pass an additional parameter through each shortcode. The parameter is called “class”. This is so you can specify a CSS class name in the “class” parameter and the plugin will apply the CSS defined for that class to the shortcode anchor (text or image). You can learn more about it here:

http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/how-to-style-a-lightbox-shortcode-anchor-118

Suppose, you are using the following shortcodes:

[wp_lightbox_prettyPhoto_image link="http://www.example.com/overlay-image1.jpg" description="overlay image description goes here" source="http://www.example.com/anchor-image1.jpg" title="overlay image1 title goes here" class="my_test_class"]

[wp_lightbox_prettyPhoto_image link="http://www.example.com/overlay-image2.jpg" description="overlay image description goes here" source="http://www.example.com/anchor-image2.jpg" title="overlay image2 title goes here" class="my_test_class"]

Now open the wp_lightbox_ultimate_custom.css file and add the definition of the CSS class you have specified in the shortcode.

.my_test_class

{

display:inline;

}

By default each shortcode div takes the whole line. But this should allow each shortcode anchor to be embedded without a line break.

[tk900]

Thanks will give it atry

[JaSchweppe]

I’m having a similar issue with trying to get my anchor images to align horizontally using the CSS. I followed the instructions above and searched other topics in the forum to troubleshoot but am not having any luck.

Here’s my lightbox shortcode:

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/Welcome-Tab-4.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”lightbox_ultimate_image_anchor”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/fb-idx-tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”lightbox_ultimate_image_anchor”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/FB-School-Comm-Reports-Tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”lightbox_ultimate_image_anchor”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/fb-recently-sold-homes-tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”lightbox_ultimate_image_anchor”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/FB-Site-Listings-Tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”lightbox_ultimate_image_anchor”]

Here’s the addition I made to the lightbox CSS file:

.lightbox_ultimate_image_anchor

{

display:inline;

}

I want the images to look like this: [http://www.zpropress.com/wp-content/uploads/2013/04/example-icons.png]

I would send you a link to the site but it’s on a secure development server until launch so I’m not able to. Any help you can provide is greatly appreciated!

[wpCommerce]

Hi, Did you try option 2?

https://support.tipsandtricks-hq.com/forums/topic/lightbox-ultimate-how-to-add-css-styles-to-a-lightbox-anchor-text-or-image

[JaSchweppe]

Yes – I tried option 2 as well.

My shortcode:

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/Welcome-Tab-4.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”image_anchor_css”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/fb-idx-tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”image_anchor_css”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/FB-School-Comm-Reports-Tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”image_anchor_css”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/fb-recently-sold-homes-tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”image_anchor_css”]

[wp_lightbox_fancybox_image link=”http://www.z57.com/wp-content/uploads/2013/04/FB-Site-Listings-Tab.png” image title=”Check out this cool new feature!” source=”http://www.z57.com/wp-content/uploads/2013/04/icon-placeholder.jpg” title=”Icon” class=”image_anchor_css”]

Custom CSS:

.image_anchor_css

{

position:relative;

}

I’ve tried adding the custom CSS to both the lightbox ultimate CSS as well as my wordpress theme’s CSS. I’ve also tried many different CSS properties using this method to see if I could get the desired affect with no luck.

[wpCommerce]

Hi, please switch to the “text/html” view of your page editor and insert the shortcode like the following:

<div style="text-align:left;float:left;">

[shortcode goes here]

</div>

<div style="text-align:left;float:left;">

[shortcode goes here]

</div>

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

Let me know how it goes.

[Author]

Posts