Advanced Search

Results 1 to 9 of 9

Thread: z-index not working with image zoomer

  1. #1
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default z-index not working with image zoomer

    1) Script Title: Image zoomer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    3) Describe problem: I am trying to implement the image zoomer for a single image but having a problem with stacking. Whenever there is a video below the large zoom image, the image shows under the video and not on top of it.

    i tried to apply the z-Index to the jQuery script but it doesn't work. Am I putting it in the wrong place ?

    Code:
    <script type="text/javascript">
    
    jQuery(document).ready(function($){
    
    $('#image1').addimagezoom({ // single image zoom
    zoomrange: [4, 4],
    magnifiersize: [500,500],
    magnifierpos: 'left',
    cursorshade: true,
    largeimage: 'largeimage.jpg',
    zIndex: [999]
    })
    
    })
    
    </script>
    Last edited by jscheuer1; 03-06-2013 at 09:36 PM. Reason: broken link

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Using z-index almost never is required in situations like that. The video needs wmode transparent. How that's done varies depending upon what kind of video it is. The video must be Flash based. But there are many different ways Flash video can be presented, each has its own way of setting the wmode to transparent. QuickTime and Media Player videos cannot be made to go behind HTML content. They will do it by themselves in some browsers, not in others. HTML 5 video can easily go behind other HTML content, but if that's what you have, there probably wouldn't be a problem in the first place.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the response. The video is an embedded video from YouTube. It happens not necessarily on the site but even when I just create an html page of my desktop with the image zoomer and a YouTube video embedded in it. The video always appear on top of the enlarged image and not behind it. I just use the embed link I get from YouTube for example:

    Code:
    <iframe width="425" height="310" src="http://www.youtube.com/embed/[videolink]" frameborder="0" allowfullscreen></iframe>
    Is there anything I need to change in the iframe to have it transparent ?
    Last edited by jscheuer1; 03-07-2013 at 07:25 PM. Reason: Format

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    If your [videolink] is just the video with no ? in it:

    Code:
    <iframe width="425" height="310" src="http://www.youtube.com/embed/[videolink]?wmode=transparent" frameborder="0" allowfullscreen></iframe>
    If it already has a ?:

    Code:
    <iframe width="425" height="310" src="http://www.youtube.com/embed/[videolink]&wmode=transparent" frameborder="0" allowfullscreen></iframe>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The "?wmode=transparent" seems to fix the problem. THANKS !

  7. #7
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK so this solution helped me with a single video where I added the "?wmode=transparent". However, my site has hundreds of embedded videos and playlists and I cannot spend days adding this command to each video.

    Is there an overall solution to this problem within the script?

  8. #8
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    forget my last post. It works. THANKS

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Yeah well if you're using jQuery you could have it (or if not, even ordinary javascript) add that to every YT vid's URL on a page. But the question would be whether or not that would be in time for it to be parsed by the YT server.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. z-index not working with image zoomer
    By unr3al39 in forum JavaScript
    Replies: 1
    Last Post: 03-07-2013, 12:17 PM
  2. image power zoomer z-Index
    By vwphillips in forum Bug reports
    Replies: 0
    Last Post: 02-15-2012, 11:37 AM
  3. Image power zoomer not working with AJAX
    By dvnitycker in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-22-2011, 03:59 AM
  4. Replies: 0
    Last Post: 09-08-2010, 01:03 AM
  5. Z-Index Not working in ie 6
    By beeps in forum CSS
    Replies: 2
    Last Post: 02-02-2010, 01:47 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •