0

I am building a custom theme for koken based on their Blueprint framework theme and have coded it so the album template loops over all images in the album and outputs the images into a 4 column masonry-like grid using CSS, and a jquery script so that when I hover over an image it changes the opacity of all other images in the grid to 0.4.

The jquery code with the grid works fine in JSFiddle, but when I bring it into the koken theme, whenever an image is hovered, the script works for a second showing all but the hovered image at reduced opacity, but then hiding all the images except for the hovered image and the first column.

The code used for the grid is as follows:

HTML

<main>
<div id="grid">
    <ul>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
    </ul>
</div>

CSS

#grid {
    /* Prevent vertical gaps */
    line-height: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    -moz-column-count: 4;
    -moz-column-gap: 0;
    column-count: 4;
    column-gap: 0;
}
#grid img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
}
#grid ul li {
    display: inline;
}
.gridimg {
    opacity:1;
    transition: opacity 0.5s;
}
.opaque {
    opacity:0.4;
    transition: opacity 0.5s;
}

JS

$('img.gridimg').hover(function () {
    $('img.gridimg').not(this).each(function () {
        $(this).toggleClass("opaque");
    });
});

JSFiddle is here: http://jsfiddle.net/jgYY9/3/

Is there something in the koken code that is messing this up? And does anyone know how I can fix it?

Thanks.

Icarus
  • 1,627
  • 7
  • 18
  • 32
Zac Harney
  • 1
  • 2
  • What seems to be the problem? When I hover over an image it changes the other image's opacity, when I move to a different image, the one I was on changes opacity and the new one has full opacity, when I leave, all of them get their opacity back. –  May 16 '14 at 23:52
  • @Xero It works fine in JSFiddle. That's how I want it to work, but if you go to [link](http://zacharney.com/testing/koken/) it won't work properly. – Zac Harney May 17 '14 at 00:12
  • Still not sure exactly why this happened, but I fixed it by using an overlay div instead of directly changing the images opacity. Made overlay empty, and overlay.active with background rgba(255,255,255,0.6) and set the JQuery to toggle the active class to overlay. – Zac Harney May 17 '14 at 03:52

0 Answers0