Question

I’m working on a portfolio site, it has a gallery which is fixed up to a CMS. Here’s the set up all the images are to be placed one on top of the other and then the thumbnails are actually masked portions of the image, when you hover over one the image is shown in place of all the other ‘masked images’ – a simple fade in fade out with JQuery. The gallery is like a series of preview boxes (the masks) just around 70x70px pretty small here’s an example of how it would work:

https://i.stack.imgur.com/UA7f0.jpg

That said, I’m having trouble with masking these images because since it’s going to be run by a CMS so the actual locations of the masks aren’t going to be the same so it’ll be like a moving mask as newer images are uploaded. I’ve tried using the clip property in the CSS but that needs for the mask to be placed in one spot hence not an option. Any ideas I’m stuck :/

Okay so I’ve been working at this and found a means of doing it using a mix of jQuery and CSS. Here’s my progress:

http://haiderali.heliumhost.tk/site/

But I’ve still got a problem I can’t seem to get the mouseover working. Right now what you see is how the gallery would look on hover I’ve set up two images for a test and I’ve also set up the program to collect all the image src attributes into an array. Any ideas on how to get this working? Here’s the code:

// Assign each link it's class by position on screen
    var i = 0;

    for (i = 0; i <= 71; i++) {
        clipNum = i + 0;
        $('#links').find('a').eq(i).addClass('clip' + clipNum);
    }

// Define all img>src attributes to an array
    var SRC = new Array(71);

    for (i = 0; i <= 71; i++) {
        clipNum = i + 0;
        SRC[i] = $('a.clip' + clipNum + ' > img').attr('src');
    }

I’ve attempted the mouseover successfully by storing the image src value and then replacing all the other sources with that but I’ve only been able to do that as hard coding like this:

var imgSrc1 = $('a.clip1 > img').attr('src');
$('a.clip1').mouseenter( function() {
    $('a.clip1 > img').attr({src: imgSrc1});

My problem now is that I can’t get this to work in a loop counter 🙁 I’d really like some help one how to make it work for every box on the screen I could only do this by hard coding each box separately that’s 72 boxes times 2 times 72 images… that’s alot!!

Answer 1

I managed to figure out the problem, it was under my nose all along. It’s a simple .each() statement that loops the code to post the appropriate image source to all the boxes on hover and then return them to normal via a set Array of image sources.

I’m posting the code here so others who might have been interested can take a look.

HTML (arranged into a grid with CSS and the clipping images set .clip1-onwards):

<div id="links">
   <a href="#nogo" class="">
   <img src="images/one.jpg" />
   </a>...
   <a href="#nogo" class="">
   <img src="images/one.jpg" />
   </a>
</div>

jQuery:

$(document).ready(function() {
// Assign each link it's class by position on screen
var i = 0;

for (i = 0; i <= 71; i++) {
    clipNum = i + 0;
    // Add incremented clip class to each link
    $('#links').find('a').eq(i).addClass('clip' + clipNum);
}

// Define all img>src attributes to an array
var SRC = new Array(71);

for (i = 0; i <= 71; i++) {
    clipNum = i + 0;
    SRC[i] = $('a.clip' + clipNum + ' > img').attr('src');
}

// Set initial opacity of boxes 
$('#links a > img').fadeTo('fast', '0.8');

// Hover Magic!!
$('#links a > img').hover(
    function() {
        // store img>src under current link
        var imgSrc = $(this).attr('src');
        // replace all img>src
        $('#links a > img').attr({ src: imgSrc});
        $('#links a > img').fadeTo('slow', '1.0');
    },
    function() {
        $.each( SRC , function(index, value) {
            // replace img>src from array
            $('#links a.clip' + index + ' > img').attr({ src: value});
        });
        // .stop() to make sure fadeIn() stops before fadeout()
        $('#links a > img').stop(true,true).fadeTo('fast', '0.8');
    }
);
});