YoxView is easy to use and works fine with several browsers, however using IE9 the images are displayed with the wrong height. (500px x 300px)

I placed the following code inside a page:

<head>
<script type="text/javascript" src="/sites/all/modules/yoxview/yoxview/yoxview-init.js"></script>
</head>

<div class="yoxview">
    <a href="/sites/default/images/image_1.png">
    <img style="margin:15px;" src="/sites/default/images/image_1png" alt="1" title="Image_1" width="100" height=194" /></a>
    <a href="/sites/default/images/image_2.png">
    <img style="margin:15px;"src="/sites/default/images/image_2.png" alt="2" title="Image_2" width="100" height=194" /></a>
</div>

Is there a workaround?

Comments

kioko’s picture

kioko commented

I've noticed the same problem on IE9. I wish there was a solution to this as I would really like to use yoxview for my pictures.

cisana’s picture

cisana commented

I've tried other image gallery alternatives but at the end I finished using HTML-iframe in a basic-page (DP7).
It works for me, then I only need to show 5 images. It's similar to the iPhone App Store.
If anybody is interested I would post my solution.

cisana’s picture

cisana commented
Status: Active » Closed (fixed)
SeanKendle’s picture

SeanKendle commented
Version: 7.x-1.1 » 7.x-2.x-dev
Priority: Normal » Critical
Status: Closed (fixed) » Needs review

(YoxView 2.21):

I have reproduced this problem (unfortunately in a production environment, and my client found it... O_o), and have figured out how to fix it (not just work around it like above with iframes):

The problem exists in function loadAndDisplayMedia(media) (lines 2107 & 2108):

// Resets the src attribute for the image - avoids a rendering problem in Chrome.
                    // $.opacity is tested so this isn't applied in IE (up to IE8), 
                    // since it creates a problem with the image's fading:
                    if ($.support.opacity)
                        tempImg.src = "";

It appears they put these two lines in the code to prevent rendering issues in older versions of Chrome, and it supposedly wouldn't affect IE (<8) because it didn't support the "opacity" property. Well, apparently IE 9+ now supports this property. What happens is, it sets the src of the media variable to "", which then later causes an error to bubble up. When that happens it then calls (line 2153): 

function displayError(errorMsg) {
            changeMedia({
                html: "<span class='yoxview_error'>" + errorMsg + "</span>",
                width: 500,
                height: 300,
                type: "error",
                title: ""
            });
        }

As you can see, it sets the outer image holding Div to 500x300 pixels, giving you a squashed and ugly image in the viewer!

I commented out the lines, and it started working in IE, but then was broken in Chrome. The initial image load worked in Chrome, but exiting out of the slideshow, and then clicking on an image in the gallery would leave it tiny and spinning its wheels...

To fix this problem change line 2107 to:

if (window.chrome)

Tested in IE 10.0.9200.16635, Firefox 22.0 & 23.0, and Chrome 28.0.1500.95 m

SeanKendle’s picture

SeanKendle commented
Issue summary: View changes

Added specific height and width the image is being set to.