Hi,

I am trying to use Visual Lightbox in a site and have it to where the client can change out the images. So, my thought was to iframe it on the page. I use the code from here: http://embedresponsively.com/ to get the iframe responsive but it appears that the height of the iframe isn't 'responsive' and has created a scroll. Is there a trick to get this to work? Here is the page I am referring to: http://spoonfrogclients.com/dave/inventory.html

Thanks!

I am trying to figure out a similar thing for a Google Map embed. In the style, the 56.25% is a ratio of the size. It appears that the iframe will maintain a ratio of its height, since the actual iframe is larger than that, you get scrollbars. The 56.25% is the height of the scroll bars against the width, and the height of the content in the frame in my window was 8xx pixels. In my window, it is a 1136 width iframe content, and the hight of the scrollbars is 639 (1136 x 56.25%)

It seems to me, to make it responsive, (smaller width viewports requires a taller iframe) one has to create a custom css file with media queries for the breakpoints, to change that ratio in a class. If you increase that 56.25%, you will get a taller frame. But, I don't know how to make it responsive to breakpoints by a different way (I haven't tried it yet, once I get to a small window, I want my map to have a different ratio). I asked a similar question in the web dev section of the forums. Your content does not change size, so you will need to change the height of the iframe. if it was a video, you wouldn't.

Yes, I was thinking something similar until I had another one that actually worked without messing with the height. This one is an iframe using the same way as my original post and it works perfectly! http://spoonfrogclients.com/hawks2/shop.html So, now I am confused as to why this one works and the other one doesn't.

Hi Spoonfrog, I cannot find any Iframe in the source code of that page.

I think the height:0px is causing issues. On the good example, it has a height and no padding. But - that height is manually set in the code, and I don't know how somene can have that change - supposing their tractor inventory is reduced - then if you give a set height, they may end up with 4 images someday. So maybe fixing the height property to something else might work.

Before you mess with it, that iframe and the google map yu have - share the same class. You will need to change the class names of one of them and the styles, - otherwise if you change things for the tractors, you change the properties for the map.

I think there is javescript injecting code. It does not show in the page source, but if using IE or Firefox, and using the WebDeveloper Inspector tools, once can find the code as it is presented in the page. I beliebve the Web developer add-on is able to read the code.

Hi Bill, I did notice that, but it was said that the Iframe was added in the same way as the first post suggested, which is not at all the same

With regards to embedding Google Maps using Embed Responsively, I find it works quite well so long as your not going from desktop size to mobile(which is not normal). The marker normally loads visible on any screen size when loaded fresh. The only issue would be if say the orientation was switched but I found the marker to still be visible in my experience

HI,

Sorry about that. You guys are right. That wine site was done differently. I originally had it set up the same way as the tractor site. My bad.

Bill, thanks for the heads up on the classes. I didn't catch that but will be sure to change it.

I still haven't found a solution for the visual lightbox iframe, but I am still looking. I will be sure to post if I figure something out.

How about using jquery to count the number of images and apply the result to the height of the iframe?

Hi Eric,

That sounds like an awesome idea, but I have NO idea how to do that.