Dropdowns & Image Hover Zoom

  • Bruce
    Bruce
    Senior Member 102 points
    September 4, 2013 at 12:32 pm

    Hi there

    Website currently in early development, example URL: https://www.leadonvalesolutions.co.uk/hobo-leather-braided-bracelet/

    Colour dropdown – Is there a way that the first colour can be shown? Currently blank so user has to click down arrow to populate.

    Image Zoom – User currently has to click on thumbnail to get zoomed image.. is there a way to activate zoom when just hovering over thumb?

    Grateful for advice,

    Bruce

  • Bruce
    Bruce
    Senior Member 102 points
    September 4, 2013 at 7:49 pm

    Anyone? Are these features that can’t be changed?

  • Jennifer
    Jennifer
    Senior Member 119 points
    February 19, 2014 at 3:58 am

    Hi Bruce,

    You can use CSS animations or transitions to zoom a product. I’m not sure what your other question means.

    Jennifer

  • Bruce
    Bruce
    Senior Member 102 points
    February 19, 2014 at 12:48 pm

    Thanks Jennifer, my first point relates to the attributes of a product, e.g., colour not displaying (or being prepopulated) in the drop-down box, i.e., when customer selects a product they have to click the down arrow against colour to see the colours available (currently it’s empty).

  • Jennifer
    Jennifer
    Senior Member 119 points
    February 19, 2014 at 8:23 pm

    Do you have a link?

  • Bruce
    Bruce
    Senior Member 102 points
    February 19, 2014 at 9:14 pm

    https://www.custarddesigns.com – I’ve taken the plunge and am redeveloping in the responsive Shop theme.. too many issues with SP (featured items, free delivery not working etc.).

  • Jennifer
    Jennifer
    Senior Member 119 points
    February 21, 2014 at 10:09 pm

    Looks pretty good overall Bruce! That box with the color options is technically referred to as a “select box” and needs Javascript of HTML (see below) in order to activate on mouseover or hover. Looks like you also need to set a default value for it. As for where to put the code below, I don’t see a way around editing a core .js file. One of the bigger and better experts on the forum like Ian or David could probably tell you. Either you can find a way to put your .js file in your child theme and add the code there, or find the core file and just keep a note of where you need to re-add it after each theme update.

    I found this on Stackoverflow:

    https://stackoverflow.com/questions/12622191/trigger-click-on-select-box-on-hover

    I finally got this to work! You need Chosen; as others have pointed out, you can’t do this with a normal select because there are no events available to use. But this will pop open the menu when you mouseover the select and close it when you mouseout, which is the exact effect I wanted.

    HTML:

    <select id=”dropdown” data-placeholder=”Choose…”>
    <option value=”one”>Option 1</option>
    <option value=”two”>Option 2</option>
    <option value=”three”>Option 3</option>
    </select>

    JS:

    $(“#dropdown”).chosen().next(“.chzn-container”).hover(
    function(){
    $(“#dropdown”).trigger(“liszt:open”);
    },
    function(){
    $(this).trigger(“click”);
    }
    );

    $(“#dropdown”).trigger(“liszt:open”); is what opens the menu. There is no equivalent liszt:close event to trigger when you want to close it (as far as I know), but triggering a click on it instead has the same effect.

  • Malgorzata
    Malgorzata
    Super Guru 1,606 points
    February 21, 2014 at 11:42 pm

    @Jennifer; This is great. Thanks for sharing!

Viewing 8 posts - 1 through 8 (of 8 total)

New Business Themes for WordPress 2020

Start your new website today!

View Business Themes