WordPress hack/plugin needed for hover over link, show image in DIV (gallery)

5 Views

I am developing a WordPress site for an art gallery. Client wants an artists roster image gallery exactly like this one: http://www.walkercontemporary.com/artists/

I have created a custom post type that generates a list, links to an artist’s specific content. Now I need an effect that displays a sample image in an adjacent DIV on mouseover of the link. Based on viewing the source code of the above site, I am certain that this is a Dreamweaver feature. I would like for my solution to be integrated into the easy to use CMS capabilities of WordPress. Otherwise I will advise the client to seek another solution. They don’t have the chops to maintain a large roster of artists doing manual coding, and they do not want thumbnails for visitors to hover over (which is how many other solutions approach it).

Read More

Ideally, I would like some kind of REL value or automatically generated onmouseover values to be generated in the list items that calls the Featured Image associated with each artist in the custom post type. Is this possible? -thx – Steve

Post Views: 5

Related posts

Leave a Reply

1 comment

  1. for some reason I could not access your website to look at the example.

    But if I understood right , all you need is 3-4 lines of jQuery ..

    $('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));// if you want to add description also
});

    DEMO

    EDIT I

    After the comment of OP –

    I admit I was wrong… you do not need 4 lines of code – you need only 2 . 🙂

    But I was not wrong about the fact that same code will work for both hover and click . it is essentially the same .

    you only need to change the word (function) “CLICK” with “HOVER”
    (note that nothing else was changed)

    $('#thumbs img').hover(function(){
        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    });

    I also admit that sometimes I take for granted some basic skills, which I shouldn´t. when I was learning, I had the same begginer problems.
    So if you still have doubts – I made a fiddle with 3 demos .

    1. Swap with thumbs
    2. Swap with live links
    3. Swap with dummy links

    See all of them here: Demo

    I hope now it is clear .

    EDIT II

    MY GOD !! I was wrong again . The code should be even SHORTER ! (no need for replace() )

    $('#largeImage2').attr('src',$(this).attr('href'));

    Final Demo (shorter code)

    (and BTW – there is no such thing as a “Dreamweaver feature” when the site is live on the server – Dreamweaver is only a UI that produces CODE . may it be html / javascript / php or whatever. it is at the end just TXT files. in that regard – it has no “features” as to the execution of the code. it can be regarded as a GUI for Notepad 🙂 . the “MM” part of the code you see , is just normal JAVASCRIPT (And not even optimal one )that is inserted via Dreamweaver. that´s all)