Search code examples
jquerylightboxnivo-slider

Nivo lightbox adding tags to image to make them iframes

I have a site that I am implementing the Nivo Lightbox on (documentation can be found here). I added the css and script tags and it seemed to be working fine, but when I tested it, I noticed that some of the images were left justified instead of centered. When I examined the code that was pulling up in the slider, it said that the slider's content was

<iframe src="/images/sized/images/uploads/_DSC0413-333x500.JPG" class="nivo-lightbox-item" frameborder="0" vspace="0" hspace="0" scrolling="auto"></iframe>

whereas the normal images were using this tag

<img class="mfp-img" src="http://www.hoekstraspecialty.com/images/photo_gallery/copy_1_sprinter9.jpg" style="max-height: 535px;">

with no iframe.

I am adding the images to the lightbox through a weblog in ExpressionEngine. The code for entering the images and tying them to the lightbox is

{exp:weblog:entries weblog="gallery_images" url_title="shelving" limit="1" disable="member_data|trackbacks|pagination|categories"}
    <p style="text-align: right;">
        {equip_gallery limit="1"}<a href="{img}" class="shelving" data-lightbox-gallery="gallery1"><img class="shelving"  alt="" src="{site_url}images/uploads/button_shelving_17.jpg" style="width: 228px; height: 29px;"></a>{/equip_gallery}
        <div id="gallery" style="display:none;">
            {if equip_gallery}
                {equip_gallery}
                    <a href="{exp:imgsizer:size src="{img}" height="500" justurl="yes" }" class="shelving"  data-lightbox-gallery="gallery1"><img class="small" src="{img}" title="{caption}"></a>
                {/equip_gallery}
            {/if}
        </div>
    </p>
{/exp:weblog:entries}

All of the images should be added in the same format, and when I look at the image tags not in the lightbox, they all look the same, so I'm not sure why some of them are being put in iframes and some are not.

To see an example, click on the link above and click "Shelving Gallery". The first image is working correctly and is formatted with an img tag. The last image (click the left arrow) is formatted incorrectly with the iframe tag.

Solution

  • Using the script I was using, I had no control over the type of content the lightbox was displaying (that was controlled by the lightbox's code). Because of this, I switched to a different lighbox where I could control the content type. This fixed the problem I was having, though I'm still unsure why the original lightbox was reading some of the images as iframes.