jQuery & IE issue

Coyx 0 Newbie Poster
12 Years Ago
Hi all,
Looking for some help with a piece of code in a jQuery slider.
The problem is that it is refusing to do anything in IE, whether by clicks or automatically slide - as it does in Chrome/Firefox.
The slider is on the home page;
http://www.darenthmjs.com/
The code is as follows.
<?php if(get_option('glt_lof_slider_tabs')=='false') : ?>

 <!--FEATURED SECTION-->
  <div id="featured" class="OrginalLof">
  
   <!-- THE LOF SLIDER -->
<div id="lofslidecontent45" class="lof-slidecontent" style="width:980px; height:410px;">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <div class="lof-main-outer" style="width:980px; height:410px;">
  	<ul class="lof-main-wapper">

		<?php
		
			$count_items = get_option('glt_lof_slider_items');
			$slider = new WP_Query(array('post_type' => 'slider', 'showposts' => $count_items )); 
			
			while ( $slider->have_posts() ) : $slider->the_post();
			
			$show_desc = get_post_meta($post->ID, 'glt_show_desc', true); 
			$pos_desc = get_post_meta($post->ID, 'glt_desc_position', true);
			$slider_format = get_post_meta($post->ID, 'glt_slider_type', true);
			$video_id = get_post_meta($post->ID, 'glt_video_id', true);
			$link_img_on = get_post_meta($post->ID, 'glt_image_link_on', true);
			$link_img = get_post_meta($post->ID, 'glt_image_link', true);
			
			$thumb = get_the_post_thumbnail($post->ID);
			$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
			preg_match($pattern, $thumb, $thePath);
			$poster = $thePath[0];
			
						?>

			<?php switch($slider_format) {
			case 'Image': ?>
			
            <li>
            <?php if($link_img_on) : ?>
            
            <a href="<?php if($link_img<>"") {echo $link_img; } else { the_permalink(); } ?>">
            	
				<?php the_post_thumbnail('slideImage', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>

            <?php else: ?>
                
                <?php the_post_thumbnail('slideImage', array('alt' => '', 'title' => '')); ?>

            <?php endif; ?>            

        <?php if($show_desc) : ?><div class="slide-text pos_<?php echo $pos_desc; ?> ">
              
              <h4><?php the_title(); ?></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>
			</li>
			
			
			
			
			<?php break;
			case 'Vimeo':
			?>

           <li>

            <div class="video-slider-wrapper vimeo <?php if($pos_desc=='left'){ echo "right_pos"; } ?>">
              <div class="video-inner" style="height:299px; width:532px;">
                <object width="532" height="299" type="application/x-shockwave-flash" data="http://www.vimeo.com/moogaloop.swf">
                  <param name="allowfullscreen" value="true" />
                  <param name="movie" value="http://www.vimeo.com/moogaloop.swf" />
                  <param name="wmode" value="opaque" />
                  <param name="allowscriptaccess" value="always" />
                  <param name="flashvars" value="wmode=opaque&amp;allowfullscreen=true&amp;allowscriptacess=always&amp;server=www.vimeo.com&amp;clip_id=<?php echo $video_id; ?>&amp;show_portrait=1&amp;show_title=1&amp;show_byline=1&amp;fullscreen=1">
                </object>
              </div>
            </div>

        <?php if($show_desc) : ?><div class="slide-text vimeo <?php if($pos_desc=='left'){ echo "pos_left"; } else { echo "pos_right"; } ?>">
              
              <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

          </li>
          
          <?php break;
		  case 'Youtube':
		  ?>

          <li>

            <div class="video-slider-wrapper <?php if($pos_desc=='left'){ echo "right_pos"; } ?> youtube">
              <div class="video-inner" style="height:328px; width:530px;">
        
                <object width="530" height="328" type="application/x-shockwave-flash" data="http://www.youtube.com/v/<?php echo $video_id; ?>&amp;amp;rel=0&amp;amp;fs=1&amp;amp;showsearch=0&amp;amp;showinfo=0">
				  <param name="wmode" value="opaque">
  				  <param name="allowfullscreen" value="true">
                  <param name="movie" value="http://www.youtube.com/v/<?php echo $video_id; ?>&amp;amp;rel=0&amp;amp;fs=1&amp;amp;showsearch=0&amp;amp;showinfo=0" />
	  	          <param name="allowscriptaccess" value="always">
				</object>

              </div>
            </div>
            <?php if($show_desc) : ?><div class="slide-text youtube <?php if($pos_desc=='left'){ echo "pos_left"; } else { echo "pos_right"; } ?>">
              
              <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

            </li>
            
            <?php break;
			case 'Mp4/Flv': ?>


            <li>

            <div class="video-slider-wrapper <?php if($pos_desc=='left'){ echo "right_pos"; } ?> youtube">
              <div class="video-inner" style="height:328px; width:530px; background-color:#000;">
            
            	<object width="530" height="328" type="application/x-shockwave-flash" data="<?php echo get_bloginfo('stylesheet_directory'); ?>/swf_players/flowplayer-3.2.4.swf" name="player_api" id="player_api">
  <param value="true" name="allowfullscreen">
  <param value="always" name="allowscriptaccess">
  <param value="high" name="quality">
  <param name="wmode" value="transparent"> 
  <param value="true" name="cachebusting">
  <param value="#000000" name="bgcolor">
  <param name="movie" value="<?php echo get_bloginfo('stylesheet_directory'); ?>/swf_players/flowplayer-3.2.4.swf" /> 
  
<param value="config={&quot;playlist&quot;:[{&quot;url&quot;:&quot;<?php echo $poster; ?>&quot;,&quot;scaling&quot;:&quot;orig&quot;},{&quot;url&quot;:&quot;<?php echo $video_id; ?>&quot;,&quot;autoPlay&quot;:false,&quot;autoBuffering&quot;:true}],&quot;playerId&quot;:&quot;player&quot;,&quot;clip&quot;:{}}" name="flashvars">


</object>
              </div>
            </div>
       <?php if($show_desc) : ?><div class="slide-text youtube <?php if($pos_desc=='left'){ echo "pos_left"; } else { echo "pos_right"; } ?>">
              
              <h4><?php the_title(); ?></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

            </li>
            

<?php break; } endwhile; ?>



      </ul>  	
  </div>
  <!-- //END MAIN LOF SLIDER CONTENT --> 
    <!-- NAVIGATOR -->
<div class="lof-navigator-wapper">
	<div class="lof-inner-nav">
    <div onClick="return false" href="" class="lof-previous">Previous</div>
      <div class="lof-navigator-outer">
      	
            <ul class="lof-navigator">
 
 
               <?php $nav_slider = new WP_Query(array('post_type' => 'slider', 'showposts' => $count_items)); 
				while ( $nav_slider->have_posts() ) : $nav_slider->the_post(); ?>

              <li><?php the_post_thumbnail('lofThumbs', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></li>
		
        <?php endwhile; ?> 
 
 
            </ul>
            </div>
      
        <div onClick="return false" href="" class="lof-next">Next</div>
        </div>
 </div> 
  <!--//END OF THE NAVIGATOR-->
 </div> 

<!-- END OF THE LOF SLIDER -->
  </div>
  <!--//END OF FEATURED SECTION-->
<script>
jQuery.noConflict();
 jQuery(document).ready(function(){	
		var buttons = { previous:jQuery('#lofslidecontent45 .lof-previous') ,
						next:jQuery('#lofslidecontent45 .lof-next') };
						
		$obj = jQuery('#lofslidecontent45').lofJSidernews( { interval : <?php echo get_option('glt_lof_pause_time'); ?>,
			direction		: 'opacitys',	
			easing			: 'easeInOutExpo',
			duration		: <?php echo get_option('glt_lof_an_speed'); ?>,
			auto		 	: <?php echo get_option('glt_lof_autoplay'); ?>,
			maxItemDisplay  : 8,
			navPosition     : 'horizontal', // horizontal
			navigatorHeight : 55,
			navigatorWidth  : 80,
			mainWidth:980,
			buttons			: buttons} );	
		});
</script>   



<?php else : ?>
  <!--FEATURED SECTION-->
<div id="featured" class="TabbedSlider">

<div class="slider-panes">  
	<div class="pane">
    <!-- THE LOF SLIDER -->
    <div id="lofslidecontent45" class="lof-slidecontent" style="width:980px; height:409px;">
      <div class="preload">
        <div></div>
      </div>
      <!-- MAIN CONTENT -->
      <div class="lof-main-outer" style="width:980px; height:409px;">

	 <ul class="lof-main-wapper">

<?php		$count_items = get_option('glt_lof_slider_items');

			
			$slider = new WP_Query(array('post_type' => 'slider', 'showposts' => $count_items, 'meta_key' => 'glt_slider_type', 'meta_compare' => '=', 'meta_value' => 'Image' )); 
			while ( $slider->have_posts() ) : $slider->the_post();
			
			$show_desc = get_post_meta($post->ID, 'glt_show_desc', true); 
			$pos_desc = get_post_meta($post->ID, 'glt_desc_position', true);
			$link_img_on = get_post_meta($post->ID, 'glt_image_link_on', true);
			$link_img = get_post_meta($post->ID, 'glt_image_link', true);
			
			$thumb = get_the_post_thumbnail($post->ID);
			$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
			preg_match($pattern, $thumb, $thePath);
			$poster = $thePath[0];
			
			 ?>
        
          <li>    
		  
      <?php if($link_img_on) : ?>
            
            <a href="<?php if($link_img<>"") {echo $link_img; } else { the_permalink(); } ?>">
            	
				<?php the_post_thumbnail('slideImage', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>

            <?php else: ?>
                
                <?php the_post_thumbnail('slideImage', array('alt' => '', 'title' => '')); ?>

            <?php endif; ?>            

        <?php if($show_desc) : ?><div class="slide-text pos_<?php echo $pos_desc; ?> ">
              
              <h4><?php the_title(); ?></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

        </li>
          
  <?php endwhile; ?>
          
	        </ul>
      </div>
      <!-- //END MAIN LOF SLIDER CONTENT -->
      
      <!-- NAVIGATOR -->
      <div class="lof-navigator-wapper">
        <div class="lof-inner-nav">
          <div onClick="return false" class="lof-previous"><?php _e('Previous', 'gallant'); ?></div>
          <div class="lof-navigator-outer">
            <ul class="lof-navigator">

		<?php $nav_slider = new WP_Query(array('post_type' => 'slider', 'showposts' => $count_items, 'meta_key' => 'glt_slider_type', 'meta_compare' => '=', 'meta_value' => 'Image')); 
				while ( $nav_slider->have_posts() ) : $nav_slider->the_post(); ?>

              <li><?php the_post_thumbnail('lofThumbs', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></li>
		
        <?php endwhile; ?>              

            </ul>
          </div>
          <div onClick="return false" class="lof-next"><?php _e('Next', 'gallant'); ?></div>
        </div>
      </div>
      <!--//END OF THE NAVIGATOR-->
    </div>
    <!-- END OF THE LOF SLIDER -->
<script>
jQuery.noConflict();
 jQuery(document).ready( function(){	
		var buttons = { previous:jQuery('#lofslidecontent45 .lof-previous') ,
						next:jQuery('#lofslidecontent45 .lof-next') };
						
		$obj = jQuery('#lofslidecontent45').lofJSidernews( { interval : <?php echo get_option('glt_lof_pause_time'); ?>,
												direction		: 'opacitys',	
												easing			: 'easeInOutExpo',
												duration		: <?php echo get_option('glt_lof_an_speed'); ?>,
												auto		 	: <?php echo get_option('glt_lof_autoplay'); ?>,
												maxItemDisplay  : 8,
												navPosition     : 'horizontal', // horizontal
												navigatorHeight : 55,
												navigatorWidth  : 80,
												mainWidth:980,
												buttons			: buttons} );	});
</script>    
    </div>
    
    
    <div class="pane">
    
    <!--VIDEO LOF SLIDER-->
   <div id="lofslidecontent46" class="lof-slidecontent" style="width:980px; height:410px;">
      <div class="preload">
        <div></div>
      </div>
      <!-- MAIN CONTENT -->
      <div class="lof-main-outer" style="width:980px; height:410px;">
        <ul class="lof-main-wapper">

			<?php $slider = new WP_Query(array('post_type' => 'slider', 'showposts' => $count_items, 'meta_key' => 'glt_slider_type', 'meta_compare' => '!=', 'meta_value' => 'Image' )); 
			
			while ( $slider->have_posts() ) : $slider->the_post();
			
			$show_desc = get_post_meta($post->ID, 'glt_show_desc', true); 
			$pos_desc = get_post_meta($post->ID, 'glt_desc_position', true);
			$slider_format = get_post_meta($post->ID, 'glt_slider_type', true);
			$video_id = get_post_meta($post->ID, 'glt_video_id', true);
			
			$thumb = get_the_post_thumbnail($post->ID);
			$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
			preg_match($pattern, $thumb, $thePath);
			$poster = $thePath[0];
			
						?>

			<?php switch($slider_format) {
				case 'Vimeo':
			?>

           <li>

            <div class="video-slider-wrapper vimeo <?php if($pos_desc=='left'){ echo "right_pos"; } ?>">
              <div class="video-inner" style="height:299px; width:532px;">
                <object width="532" height="299" type="application/x-shockwave-flash" data="http://www.vimeo.com/moogaloop.swf">
                  <param name="allowfullscreen" value="true" />
                  <param name="wmode" value="opaque" />
                  <param name="movie" value="http://www.vimeo.com/moogaloop.swf" />
                  <param name="allowscriptaccess" value="always" />
                  <param name="flashvars" value="wmode=opaque&amp;allowfullscreen=true&amp;allowscriptacess=always&amp;server=www.vimeo.com&amp;clip_id=<?php echo $video_id; ?>&amp;show_portrait=1&amp;show_title=1&amp;show_byline=1&amp;fullscreen=1">
                </object>
              </div>
            </div>

        <?php if($show_desc) : ?><div class="slide-text vimeo <?php if($pos_desc=='left'){ echo "pos_left"; } else { echo "pos_right"; } ?>">
              
              <h4><?php the_title(); ?></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

          </li>
          
          <?php break;
		  case 'Youtube':
		  ?>

          <li>

            <div class="video-slider-wrapper <?php if($pos_desc=='left'){ echo "right_pos"; } ?> youtube">
              <div class="video-inner" style="height:328px; width:530px;">
        
                <object width="530" height="328" type="application/x-shockwave-flash" data="http://www.youtube.com/v/<?php echo $video_id; ?>&amp;amp;rel=0&amp;amp;fs=1&amp;amp;showsearch=0&amp;amp;showinfo=0">
				  <param name="wmode" value="opaque">
  				  <param name="allowfullscreen" value="true">
	  	          <param name="allowscriptaccess" value="always">
                  <param name="movie" value="http://www.youtube.com/v/<?php echo $video_id; ?>&amp;amp;rel=0&amp;amp;fs=1&amp;amp;showsearch=0&amp;amp;showinfo=0" />
				</object>

              </div>
            </div>
            <?php if($show_desc) : ?><div class="slide-text youtube <?php if($pos_desc=='left'){ echo "pos_left"; } else { echo "pos_right"; } ?>">
              
              <h4><?php the_title(); ?></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

            </li>
            
            <?php break;
			case 'Mp4/Flv': ?>


            <li>

            <div class="video-slider-wrapper <?php if($pos_desc=='left'){ echo "right_pos"; } ?> youtube">
              <div class="video-inner" style="height:328px; width:530px; background-color:#000;">
            
            	<object width="530" height="328" type="application/x-shockwave-flash" data="<?php echo get_bloginfo('stylesheet_directory'); ?>/swf_players/flowplayer-3.2.4.swf" name="player_api" id="player_api">
  <param value="true" name="allowfullscreen">
  <param value="always" name="allowscriptaccess">
  <param value="high" name="quality">
  <param name="wmode" value="transparent">
  <param name="movie" value="<?php echo get_bloginfo('stylesheet_directory'); ?>/swf_players/flowplayer-3.2.4.swf" /> 
  <param value="true" name="cachebusting">
  <param value="#000000" name="bgcolor">
<param value="config={&quot;playlist&quot;:[{&quot;url&quot;:&quot;<?php echo $poster; ?>&quot;,&quot;scaling&quot;:&quot;orig&quot;},{&quot;url&quot;:&quot;<?php echo $video_id; ?>&quot;,&quot;autoPlay&quot;:false,&quot;autoBuffering&quot;:true}],&quot;playerId&quot;:&quot;player&quot;,&quot;clip&quot;:{}}" name="flashvars">
</object>
              </div>
            </div>
       <?php if($show_desc) : ?><div class="slide-text youtube <?php if($pos_desc=='left'){ echo "pos_left"; } else { echo "pos_right"; } ?>">
              
              <h4><?php the_title(); ?></h4>
              
              <?php if(!empty($post->post_excerpt)) : ?>
          
          	<?php the_excerpt(); ?>
            
            <?php else: ?>

				<?php $page_content = apply_filters('the_content', $post->post_content); echo substr($page_content, 0, strpos($page_content, "<!--more-->")); ?>
                
                	<?php if (strpos($post->post_content, '<!--more-->')) : ?>
	
    		<a href="<?php the_permalink(); ?>" class="more"><?php _e('Read more','gallant'); ?></a>
	
                        <?php endif; ?>
                    
             <?php endif; ?>
            
        </div>
        <?php endif; ?>

            </li>
            

<?php break; } endwhile; ?>   

               
        </ul>
      </div>
      <!-- //END MAIN LOF SLIDER CONTENT -->
      <!-- NAVIGATOR -->
      <div class="lof-navigator-wapper">
        <div class="lof-inner-nav">
          <div onClick="return false" class="lof-previous"><?php _e('Previous', 'gallant'); ?></div>
          <div class="lof-navigator-outer">
            <ul class="lof-navigator">

            <?php $nav_slider = new WP_Query(array('post_type' => 'slider', 'showposts' => $count_items, 'meta_key' => 'glt_slider_type', 'meta_compare' => '!=', 'meta_value' => 'Image')); 
				while ( $nav_slider->have_posts() ) : $nav_slider->the_post(); ?>

              <li><?php the_post_thumbnail('lofThumbs', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></li>
		
        <?php endwhile; ?>  
            
            
            </ul>
          </div>
          <div onClick="return false" class="lof-next"><?php _e('Next', 'gallant'); ?></div>
        </div>
      </div>
      <!--//END OF THE NAVIGATOR-->
    </div>    
    <!--//END OF VIDEO LOF SLIDER-->
<script>
jQuery.noConflict();
 jQuery(document).ready( function(){	
		var buttons = { previous:jQuery('#lofslidecontent46 .lof-previous') ,
						next:jQuery('#lofslidecontent46 .lof-next') };
						
		$obj = jQuery('#lofslidecontent46').lofJSidernews( { interval : 4000,
			direction		: 'opacitys',	
			easing			: 'easeInOutExpo',
			duration		: 1200,
			auto		 	: false,
			maxItemDisplay  : 8,
			navPosition     : 'horizontal', // horizontal
			navigatorHeight : 55,
			navigatorWidth  : 80,
			mainWidth:980,
			buttons			: buttons} );	});
</script>    
 
 </div>
 
 </div>
 
 <div class="ul-tabs">
 	<ul class="slider-tabs">
    	<li><a href="#lof-images"><?php _e('Images', 'gallant'); ?></a></li>
        <li><a href="#lof-videos"><?php _e('Videos', 'gallant'); ?></a></li>
    </ul>
 </div>

	</div>
<!--//END OF FEATURED SECTION-->
<?php endif; ?>
Any help would be great. Apologies for the poor code formatting. :(
1 Contributor
0 Replies
92 Views
Be the first to reply
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.