WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: Featured Content Gallery] Hide With LightBox IE7 (2 posts)

  1. kennethwatt
    Member
    Posted 5 years ago #

    Hi,
    I'm using Featured Content Gallery - the plugin - on my homepage. In Chrome, FF, and Opera, when you click on the link on the headbar, which is always at the top of the screen, it will display a lightbox window. Everything else is hidden. But in IE7, not sure abt IE8 and not bothered abt IE6, it doesn't hide the Featured Content Gallery. Any suggestions...
    CSS for Lightbox

    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 9000px;
        height: 9000px;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    
    .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }

    PHP in Header for Lightbox and headbar

    <div id="headbar">This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
            <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
            <div id="fade" class="black_overlay"> The black overlay :)</div></div>

    CSS for Featured Content Gallery:

    .imageElement { display: none; }
    
    #flickrGallery
    {
    width: 500px;
    height: 334px;
    }
    
    .jdGallery .slideInfoZone
    {
    
    position: absolute;
    z-index: 50;
    width: 100%;
    margin: 0px;
    left: 0;
    bottom: 0;
    text-indent: 0;
    overflow: hidden;
    }
    
    #myGallery img.thumbnail, #myGallerySet img.thumbnail
    {
    display: none;
    }
    
    .jdGallery
    {
    overflow: hidden;
    position: relative;
    }
    
    .jdGallery img
    {
    border: 0;
    margin: 0;
    }
    
    * html .jdGallery .slideInfoZone
    {
    bottom: 100px;
    }
    
    .jdGallery div.carouselContainer
    {
    position: absolute;
    height: 135px;
    width: 100%;
    z-index: 10;
    margin: 0px;
    left: 0;
    top: 0;
    }
    
    .jdExtCarousel
    {
    overflow: hidden;
    position: relative;
    }
    
    .jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
    {
    position: absolute;
    width: 100%;
    height: 78px;
    top: 10px;
    left: 0;
    overflow: hidden;
    }
    
    .jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
    {
    position: relative;
    }
    
    .jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
    {
    margin-bottom: 10px;
    }
    
    .jdGallery .carousel .label, .jdExtCarousel .label
    {
    font-size: 13px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    padding: 0 !important;
    margin: 0;
    }
    
    .jdGallery a.right, .jdGallery a.left
    {
    position: absolute;
    height: 99%;
    width: 25%;
    cursor: pointer;
    z-index:10;
    filter:alpha(opacity=20);
    -moz-opacity:0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
    }
    
    * html .jdGallery a.right, * html .jdGallery a.left
    {
    filter:alpha(opacity=50);
    }
    
    .jdGallery a.right:hover, .jdGallery a.left:hover
    {
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    }
    
    .jdGallery a.left
    {
    left: 0;
    top: 0;
    background: url('img/fleche1.png') no-repeat center left;
    }
    
    * html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
    
    .jdGallery a.right
    {
    right: 0;
    top: 0;
    background: url('img/fleche2.png') no-repeat center right;
    }
    
    * html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
    
    .jdGallery a.open
    {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    }
    
    .withArrows a.open
    {
    position: absolute;
    top: 0;
    left: 25%;
    height: 99%;
    width: 50%;
    cursor: pointer;
    z-index: 10;
    background: none;
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    }
    
    .withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }
    
    * html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
    filter:alpha(opacity=80); }
    
    /* Gallery Sets */
    
    .jdGallery .gallerySelector .gallerySelectorWrapper
    {
    overflow: hidden;
    }
    
    .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
    {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
    }

    PHP for Featured Content Gallery

    <div id="gallery">
        <div id="myGallery">
    <div id="featured">
    	<script type="text/javascript">
            function startGallery() {
                var myGallery = new gallery($('myGallery'), {
                    timed: true
                });
            }
            window.addEvent('domready',startGallery);
        </script>
        <?php
        $imgthumb = get_option('gallery-use-thumb-image') ? "thumbnailimg" : "articleimg";
        $wordquantity = get_option('gallery-rss-word-quantity') ?  get_option('gallery-rss-word-quantity') : 100;
        if (get_option('gallery-way') == 'new')	{//new way
    			 $arr = split(",",get_option('gallery-items-pages'));
    			 if (get_option('gallery-randomize-pages'))
    			 {
    			 	 shuffle($arr);
    			 }
    			 foreach ($arr as $post_or_page_id)
    			 {
    				 get_a_post($post_or_page_id); ?>
    				 <div class="imageElement">
    					 <h2><?php the_title() ?></h2>
    					 <?php
    						if(get_option('gallery-use-featured-content')) {?>
    					     <p><?php $key="featuredtext"; echo get_post_meta($post->ID, $key, true); ?></p>
    					  <?php
    					  } else {
    					  ?>
    					     <p><?php the_content_rss('', 0, '', $wordquantity); ?></p>
    					  <?php
    						}
    						?>
    					  <a href="<?php the_permalink() ?>" title="Read More" class="open"></a>
    					  <img src="<?php $key="articleimg"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" class="full" />
    					  <img src="<?php $key=$imgthumb; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" class="thumbnail" />
    				  </div>
    			 <?php
    			 } ?>
    	     </div>
    	     <?php
    	  }
    	  else { ?>
    	    <?php $temp_query = $wp_query; ?>
    	    <?php query_posts('category_name=' . get_option('gallery-category') . '&amp;showposts=' . get_option('gallery-items')); ?>
    	    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    	       <div class="imageElement">
    	         <h2><?php the_title() ?></h2>
    	         <?php
    						if(get_option('gallery-use-featured-content')) {?>
    					     <p><?php $key="featuredtext"; echo get_post_meta($post->ID, $key, true); ?></p>
    					  <?php
    					  } else {
    					  ?>
    					     <p><?php the_content_rss('', 0, '', $wordquantity); ?></p>
    					  <?php
    						}
    						?>
    					  <a href="<?php the_permalink() ?>" title="Read More" class="open"></a>
    					  <img src="<?php $key="articleimg"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" class="full" />
    					  <img src="<?php $key=$imgthumb; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" class="thumbnail" />
    	      </div>
    	      <?php endwhile; else: ?>
    	      <?php endif; ?>
    	      <?php $wp_query = $temp_query; ?>
        	</div>
    	  <?php
    	  }?>
    
    </div>
    </div>

    Thanks in advance.
    Kenneth

  2. kennethwatt
    Member
    Posted 5 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic