Lightbox Ultimate – Use HTML code instead of shortcode

[emmamin]

I want to add another class to my source image. How can I do that? It would be just easier for me if I could use the long anchor code for the lightbox… would that work with the plugin? Or is there a way to just add in a class just for the source image???

for example for:

[wp_lightbox_prettyPhoto_video link=”http://www.youtube.com/watch?v=sample” description= text goes here” source=”http://www.sample.com/wp-content/uploads/2012/02/sample.jpg”%5D

I tried:

<a rel="wp_lightbox_prettyPhoto_video" href="http://www.youtube.com/watch?v=sample"> <img class="mouseover" src="http://www.sample.com/wp-content/uploads/2012/02/sample.jpg"/></a>

but no luck.

[wpCommerce]

http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/wp-content/uploads/wp-lightbox-stuff/docs/lightbox-ultimate-fancy-anchor-styles.pdf

[emmamin]

Thank you for your speedy reply. However, it doesn’t solve my problem. I should have provided more details. I want to not only add in class=”mouseover” but also oversrc=”http://something.jpg” (this is a plugin such that when you hover over an object another image appears.) How can I integrate this plugin with ultimate lightbox? or alternatively is there an easier way to add in another image on hover?

Here is what I was using before, with the free WP lightbox video plugin:

<a title="" rel="wp-video-prettyPhoto_video" href="http://www.youtube.com/watch?v=Rf9Cnmvlzow"><img class="mouseover" src="http://www.mattsiffert.com/wp-content/uploads/2012/02/antwerp-darker.jpg" alt="YouTube" width="275" height="183" oversrc="http://www.mattsiffert.com/wp-content/uploads/2012/02/antwerp.jpg" /></a>

thanks!

[wpCommerce]

Hi, You can’t pass any “oversrc” paramater in the shortcode. But what you can do is simply use the shortcode on a post/page:

[wp_lightbox_prettyPhoto_video link="http://www.youtube.com/watch?v=YIW5oo-8NYw" description="description goes here" width="640" height="480" source="http://www.sample.com/wp-content/uploads/2012/02/sample.jpg" class="mouseover"]

Publish the post/page and go to “View source” (right-click on your mouse)

You will be able to see the HTML code for the shortcode. It would be something like –

<div class="lightbox_ultimate_anchor lightbox_ultimate_image_anchor mouseover">

<a title="description goes here" href="http://www.youtube.com/watch?v=YIW5oo-8NYw?width=640&height=480" rel="wp_lightbox_prettyPhoto"><img src="http://www.sample.com/wp-content/uploads/2012/02/sample.jpg" alt=""/></a>

</div>

Copy the HTML code and make necessary changes to the <img…/> block. For example: adding width, height, oversrc to the source image.

<div class="lightbox_ultimate_anchor lightbox_ultimate_image_anchor mouseover">

<a title="description goes here" href="http://www.youtube.com/watch?v=YIW5oo-8NYw?width=640&height=480" rel="wp_lightbox_prettyPhoto"><img src="http://www.sample.com/wp-content/uploads/2012/02/sample.jpg" alt="YouTube" width="275" height="183" oversrc="http://www.mattsiffert.com/wp-content/uploads/2012/02/antwerp.jpg"/></a>

</div>

Now go to “HTML” view of the editor and paste the modified HTML code. Publish the post/page. That should do it.

Let me know how it goes.

[emmamin]

Great! I was able to get it to work using this method. thanks.

[wpCommerce]

You’re welcome

[Author]

Posts