WordPress.org

Ready to get started?Download WordPress

Forums

Super Zoom Gallery
[resolved] Need Hovered image To Float Right (10 posts)

  1. mghost
    Member
    Posted 2 years ago #

    I am using the Super Zoom Gallery Plugin and it is truly awesome. However, i would like to have text to the right of main image, so that when you hover over main image, zoom box appears to the immediate right, on top of text. Is this possible? I either have to use the entire width at top of post and then put text below, or have text to right of main image, then hover box appears beneath main image. how do I get this to appear on the immediate right, over text? Thanks in advance for any help!

    http://wordpress.org/extend/plugins/super-zoom-gallery/

  2. SimCox
    Member
    Posted 2 years ago #

    Hi mghost, this can be done very easily with CSS, i floated my zoom directly to the right using the following styling.

    div.zoom-box {
    	width:425px!Important; /* Sets Width */
    	height:100%!Important; /* Sets a specified height */
    	float:left!Important; /* changes the float */
            position: relative!Important; /* changes the way its positioned */
    	z-index: 2!Important;
    	top: -265px; /* -height of displayed image */
    	left: 265px; /* width of your display image */
    }
  3. SimCox
    Member
    Posted 2 years ago #

    I also wrapped my short code in a holding div that was the 265px width then floated it left, followed by having my text div floated left along side it.

    Regards,
    Brendan

  4. mghost
    Member
    Posted 2 years ago #

    Thanks! That worked perfectly. Now if i could just get it to move up slightly, so that it's even with main picture, I will be done. Thanks again!

  5. mghost
    Member
    Posted 2 years ago #

    Got it, just adjusted top px. Simcox you are awesome!!!

  6. SimCox
    Member
    Posted 2 years ago #

    Hey bud,

    I ran into a bit of an issue whilst doing the above which i made a fix for, you may now notice that the content that the hover is now above is non interactive / selectable etc (in my usage i had an anchor button which became none interactive) this is because the placeholding div isnt being hidden in the havascript.

    If you want to fix it, you need to edit the plugin file : super-zoom-gallery/zoomer.jquery.js

    and add the following line after line: 79

    $('.zoom-box').css({
    	display: "none"
     });

    This should fix any interacting issues.

    Regards,
    Brendan

  7. SimCox
    Member
    Posted 2 years ago #

    Sure you're already aware to double check any updates to see if this has been fixed by the developer (as an update will remove the above lines you add)

  8. Niels
    Member
    Plugin Author

    Posted 2 years ago #

    Nice to see people helping each other with issues like this! I will add the suggested javascript change to the next release, after testing, so you don't run into any maintenance trouble in future versions.

    Thanks to you both for using the super zoom gallery and helping each other, and others this way!

    Kind regards,

    Niels

  9. ryansosodef
    Member
    Posted 1 year ago #

    My zoombox div is currently hovering over some text, which causes the text and links under to be inactive. I tried to use SimCox fix but it seems like the code has changed. Is there a fix for this version?

    Possibly changing the z-index on fadout?

  10. ryansosodef
    Member
    Posted 1 year ago #

    I was able to find my own little hack. I changed the z-index to 99 on fadIn, and 0 on fadOut.

    So in zoomer.jquery.js, add after line 32

    $('.zoom-box').css('z-index','0');

    and add after line 42

    $('.zoom-box').css('z-index','99');

    and add after line 45

    $('.zoom-box').css('z-index','0');

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic