Lightbox Ultimate – Change width and height of anchor image

[cicak]

Hi,

I’m new to Ultimate Lightbox but I’ve been poking around it for about a day and I cant seem to find out how to do something that WP does quite well but seems to be a hassle in ULB. I have an anchor image that is in my media library. I currently have it embedded in on my page. When the user clicks on the image I (previously) had the same image upsize in a lightbox (until my previous pluggin stopped working and I purchased ULB). Anyhow, I can’t seem to tell ULB to make the anchor image a certain size. I would like the anchor image to be 272 x 317. So, far it seems like I’m going to have to upload 2 separate images to my media library (one an anchor image at 272×317) and the same image at another “display size.” Am I really going to have to do that? When I used Shadowbox JS I only needed 1 image but UBL’s extensive shortcodes don’t seem to leave any room to resize your anchor. Am I missing something?

[wp_lightbox_prettyPhoto_image link=”http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only1.jpg” description=”” source=”http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only-e1333555036903.jpg” title=””]

[wpCommerce]

Hi, we don’t have any option to directly specify the width and height for the anchor image but you can manually set it to your desired width and height. For each lightbox ultimate shortcode there will be an HTML output (once you load the webpage). Just right click on your mouse and select “View Source” option. You will be able see the source code of the entire webpage.

In your case the HTML output for the above shortcode would be something like the following:

<div class="lightbox_ultimate_anchor lightbox_ultimate_image_anchor ">

<a href="http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only1.jpg" rel="wp_lightbox_prettyPhoto" title=""><img src="http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only-e1333555036903.jpg" alt="" /></a>

</div>

You can now copy this code and make necessary changes to the <img../> block. For example: adding width and height.

<div class="lightbox_ultimate_anchor lightbox_ultimate_image_anchor ">

<a href="http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only1.jpg" rel="wp_lightbox_prettyPhoto" title=""><img src="http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only-e1333555036903.jpg" width="40" height="40" alt="" /></a>

</div>

Paste the edited code to the HTML view of your WordPress post/page editor. Update the post/page and you are done.

[cicak]

Hi,

I’m trying to make a slight variation in the code you provided me for the image issue I was having above. This time I’m trying to anchor a Youtube video to an image I would also like to control the dimensions of. I’m having difficulty geting the Youtube video to acknowledge the parameters I’m setting (such as auto hide controls). The video is being displayed in the lightbox and playing just fine.

<div class=”lightbox_ultimate_anchor lightbox_ultimate_video_anchor “>

<img src=”http://www.iics-k12.com/music/wp-content/uploads/2011/11/Vaudeville-e1333549006913.png&#8221; width=”100%” height=”100%” alt=”” />

</div>

From my reading of your material I know that you support these functions I think I’m just not putting them in the correct spot of the html.

playlist=”” width=”500″ height=”400″ hd=”0″ autoplay=”0″ display_control=”1″ fullscreen=”1″ autohide=”2″ theme=”dark” use_https=”” enable_privacy=”” show_logo=”1″ showinfo=”1″ auto_popup=”” direct_embed=”” anchor_type=”image” text=””

[cicak]

sorry, somehow my code was copied incorrectly above. I’ll try again here.

‘<div class=”lightbox_ultimate_anchor lightbox_ultimate_video_anchor “>

<img src=”http://www.iics-k12.com/music/wp-content/uploads/2011/11/Vaudeville-e1333549006913.png&#8221; width=”100%” height=”100%” alt=”” />

</div>’

[cicak]

OK. There must be trick to posting code correctly into the forum that I’m missing…

<div class="lightbox_ultimate_anchor lightbox_ultimate_video_anchor ">

<a href="http://www.youtube.com/watch?v=FjL3EjAc2_Q?version=3&autoplay=1&showinfo=0&modestbranding=1&hd=1&autohide=1" rel=wp_lightbox_prettyPhoto><img src="http://www.iics-k12.com/music/wp-content/uploads/2011/11/Vaudeville-e1333549006913.png" width="100%" height="100%" alt="" /></a>

</div>

[cicak]

Got it after I saw the directions below. Sorry.

[wpCommerce]

“I’m having difficulty geting the Youtube video to acknowledge the parameters I’m setting” – which parameter are you referring to?

I think you have specified hd=”1″ in the shortcode parameter because the HTML code has hd=”1″ in it. We have instructions in the YouTube shortcode guide that most of the player customizations will not work if you use the HD playback option for the video. Please take a look at the help text for hd option (Shortcode Parameter Reference section):

http://www.tipsandtricks-hq.com/wp-affiliate-link-manager/wp-content/uploads/wp-lightbox-stuff/docs/wp-lightbox-ultimate-youtube-shortcode-reference-guide.pdf

[cicak]

Thank you for your response. I understand that you have an extensive list of youtube parameters (such as hd=1) in your shortcode list. I would be happy to use the shortcode outlined in the documents you cited above but they (unfortunately) do not allow me the option to adjust the size of the anchor image which would, in any case, be a useful feature.

You can see, above, how it was suggested that I use the html that the short codes generates rather than the short codes themselves. So, for example when I asked how I could control the dimensions of the anchor image I was prompted to use the following html rather than the prescribed short code.

<div class="lightbox_ultimate_anchor lightbox_ultimate_image_anchor ">

<a href="http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only1.jpg" rel="wp_lightbox_prettyPhoto" title=""><img src="http://www.iics-k12.com/music/wp-content/uploads/2011/12/Blues-Scale-RH-only-e1333555036903.jpg" alt="" /></a>

</div>

I am attempting to duplicate a similar HTML code but I would like to apply it to an anchor embed of a youtube video. My issue is that I am attempting to set parameters for the youtube video (such as hd=1 or autohide). With the code I’m currently using (as seen above) the video is disregarding these parameters. What I would like to know is how I should add these parameters to the html in a way that Ultimate Light Box will understand.

I asked a similar question in another forum post about how to add the gallery setting to the another piece of html I was writing. In that instance I was asked to put place the gallery setting within the “rel” ( rel=wp_lightbox_prettyPhoto[gallery1] ) I’m under the impression that there is a similar circumstance here so I’m hoping to find out where in the html code below that I should put these parameters for the youtube video playback (version=3&autoplay=1&showinfo=0&modestbranding=1&hd=1&autohide=1)

<div class="lightbox_ultimate_anchor lightbox_ultimate_video_anchor ">

<a href="http://www.youtube.com/watch?v=FjL3EjAc2_Q?version=3&autoplay=1&showinfo=0&modestbranding=1&hd=1&autohide=1" rel=wp_lightbox_prettyPhoto><img src="http://www.iics-k12.com/music/wp-content/uploads/2011/11/Vaudeville-e1333549006913.png" width="100%" height="100%" alt="" /></a>

</div>

Thanks again so much for your help.

[wpCommerce]

Hi, If you use hd=1 in the shortcode the HTML code for that is not going to work. YouTube doesn’t support HD playback for video embed anymore. You still can use it but other parameters will stop working.

The HTML code you are using for the YouTube shortcode is not right. The solution I gave you for the first prettyPhoto shortcode is different than this. So if you try to use it using the same template I don’t think it will work. You need to actually use a shortcode to get the HTML equivalent code for it.

Anyway, even if you do use it right I’m afraid that lightbox will stop working. So we will see if we can come up with a different solution to specify width and height for anchor image. I will keep you posted.

[wpCommerce]

Hi, we have released an update. Now you can directly specify the width and height in the shortcode. You don’t have to use the HTML code anymore. 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).

If you want to specify the width and height for an anchor image you can use img_attributes parameter. For example:

[wp_lightbox_ultimate_youtube_video_embed videoid="FjL3EjAc2_Q" playlist="" width="500" height="400" hd="0" autoplay="0" display_control="1" fullscreen="1" autohide="1" theme="dark" use_https="" enable_privacy="" show_logo="1" showinfo="1" auto_popup="" direct_embed="" anchor_type="image" text="" source="http://www.iics-k12.com/music/wp-content/uploads/2011/11/Vaudeville-e1333549006913.png" img_attributes="width='100%' height='100%'"]

Let me know how it goes.

[cicak]

Wow! Your customer support is outstanding which I’ve come to realize is critical when designing your own themes in WordPress. At my work we’ve gone with a WP MU account for our wordpress needs and their support leaves something to be desired. When I tell our guys in the tech department at work that you updated a plugin within days of having a useful shortcode feature pointed out I’m not sure they’ll believe that level of customer support still exists. I think I’ll have to show them this discussion thread just to prove it to them. Bravo!

[wpCommerce]

Thanks. That was very nice of you. I really appreciate it.

[cicak]

Although I’m asking yet another question about your Ultimate Lightbox plugin I want you to know that I still mean every word said before although I did call ‘joy’ a bit early.

As I’m sure you know by now, I’ve got an anchor image that the user clicks on to activate a lightbox and I’m having a small issue.

Before I get into that let me say that the anchor image resize short code works no matter what (Bravo!).

Ok, so when I read your document entitled “wp-lightbox-ultimate-youtube-shortcode-reference-guide” and “wp-lightbox-ultimate-shortcodes-by-library-type” I started to try to set some of Youtube player parameters listed in the first document such as autohide=”1″ or them=”dark” but I was trying to call a specific lightbox library (as mentioned in the second document). For example here I’m trying to call the colorbox library and get it to autohide.

[wp_lightbox_colorbox_video link="http://www.youtube.com/embed/FjL3EjAc2_Q" title="Example Video" autohide="1" source="http://www.iics-k12.com/music/wp-content/uploads/2011/11/Vaudeville-e1333549006913.png" img_attributes="width='100%' height='100%'"]

This doesn’t work and I’m wondering if it is even possible to use the shortcodes listed in “wp-lightbox-ultimate-youtube-shortcode-reference-guide” and apply them to the codes found in “wp-lightbox-ultimate-shortcodes-by-library-type.”

I know that you offer an ultimate shortcode such as this the one outlined in “wp-lightbox-ultimate-youtube-shortcode-reference-guide”:

[wp_lightbox_ultimate_youtube_video_embed videoid="YIW5oo-8NYw" playlist="" width="500" height="400" hd="0" autoplay="0" display_control="1" fullscreen="1" autohide="2" theme="dark" use_https="" enable_privacy="" show_logo="1" showinfo="1" auto_popup="" direct_embed="1" anchor_type="" text="" source=""]

Unfortunately however, I can’t use this shortcode. I’m getting a really weird situation where the video loads and then shrinks to about 20px by 20px. The movie plays (I can hear the audio) but I can’t see it. I’ve narrowed this down to another plugin I’m using WP-UI (http://wordpress.org/extend/plugins/wp-ui/). I know that’s not ULB’s fault and I wouldn’t expect a solution per se but I thought you might like to know about the conflict. Actually I’m using ULB and WP-UI in another site (www.iics-k12.com/music/roots [its under the vaudeville menu item]) and it works fine. Go Figure.

Anyhow, if you could let me know if I can apply parameters (such as autoplay=”0″) to individual LB libraries (such as PrettyPhoto) that would be great. If not, thats ok too. I’m getting 95% out of this plugin right now so I’m really just knit picking so thanks for your patience and your support. It really is awesome.

[wpCommerce]

Hi, The parameters listed in the YouTube shortcode reference guide will only work for that particular shortcode. As I mentioned earlier that this shortcode is entirely different from any other YouTube shortcode (for example: prettyPhoto, Colorbox, fancybox). So please don’t try copying content from one shortcode to another.

Could you post a link to the page where you are having this issue?

There is an option for “Autoplay” if you are using any prettyPhoto shortcode. You will find the option under Settings->WP Lightbox->Library Settings->PrettyPhoto Settings on your WP Dashboard.

[Author]

Posts