11 Replies - 3896 Views - Last Post: 24 October 2012 - 05:32 AM

#1 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Make my slider a clickable area

Posted 29 September 2012 - 03:21 AM

Hi guys,
I'm working on a websites, I'm using a CMS (wordpress) it's running on php, I've a slider and I would like to make it a clickable area, meaning that if someone clicks on it it supposed to take it on another page depending on the image the slider is dispaying at the time. For example, let's say my slider (moving banner) has image A, B, C, and D, the slider changes the image every 3 seconds, A then B then 3 sec later C, then D. What I want is that when the user clicks when the slider displays image C, it takes him to page C, when he clicks on image A it takes him on page A, etc.... So far my slider doesn't do, does someone knows what I can do to solve that issue?
Here is my code for the slider:
<div id="slides">
	<?php } ?>
    	<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
        <?php if ( $responsive ) { ?>
			<li class="slide">
		<?php } else { ?>
			<div class="slide <?php if($i == 1) echo('active'); ?>">
		<?php } ?>
            <div class="slider_image">
				<?php print_thumbnail($arr[$i]["thumb"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width, $height, ''); ?>
				<div class="slider_overlay"></div>
            </div>
            <div class="banner">
            <h2><?php echo esc_html($arr[$i]["title"]); ?></h2>
            <?php echo($arr[$i]["excerpt"]); ?>
            <br class="clear" />
            <span><a href="<?php echo esc_url($arr[$i]["permalink"]); ?>"><?php esc_html_e('read more','SimplePress'); ?></a></span>
            </div>
 <?php if ( $responsive ) { ?>
			</li> <!-- end .slide -->
		<?php } else { ?>
			</div> <!-- end .slide -->
		<?php } ?>
        <?php }; ?>
    <?php if ( $responsive ) { ?>
		</ul> <!-- end .slides -->
	<?php } else { ?>
		</div> <!-- end #slides -->
	<?php } ?>	
      <span class="slider_shadow"></span>
      <div id="switcher"> 
      	  <?php for ($i = 1; $i <= $featured_num; $i++) { ?>
       	  <div class="item">
              <div class="wrap <?php if($i == 1) echo('active'); ?>">
               	<span class="image">
					<?php print_thumbnail($arr[$i]["thumb_small"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width_small, $height_small, ''); ?>
					<span class="slider_small_overlay"></span>
				</span>
                  <div class="hover">
                      <span><?php echo esc_html($arr[$i]["fulltitle"]); ?></span>
                      <br class="clear" />
                      <?php echo($arr[$i]["excerpt_small"]); ?>
                  </div>
              </div>
          </div>
          <?php }; ?>
      </div><!-- #switcher --> 
    </div><!-- end #featured -->

This post has been edited by JackOfAllTrades: 29 September 2012 - 03:53 AM
Reason for edit:: Added code tags


Is This A Good Question/Topic? 1
  • +

Replies To: Make my slider a clickable area

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6107
  • View blog
  • Posts: 23,662
  • Joined: 23-August 08

Re: Make my slider a clickable area

Posted 29 September 2012 - 03:53 AM

After two years and 33 posts, you should NOT need to be told to put your code IN CODE TAGS!

:code:

Anyway, this is not a PHP question, it's a Javascript one. Moved there.
Was This Post Helpful? 0
  • +
  • -

#3 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Re: Make my slider a clickable area

Posted 29 September 2012 - 04:25 AM

Ok sorry I had forgotten about the code tag and thanks but I still need the answer to my question though.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Make my slider a clickable area

Posted 30 September 2012 - 11:32 PM

could you post the HTML output, so that it is easier to see what’s going on?
Was This Post Helpful? 0
  • +
  • -

#5 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Re: Make my slider a clickable area

Posted 12 October 2012 - 08:14 AM

Dormilich, sorry for the delay I've been rely busy lately. Can you be more specific about the html outputs you want me to post? Should I post the complete codes of the page here?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Make my slider a clickable area

Posted 12 October 2012 - 10:23 AM

the HTML code that comes from the PHP code you posted.
Was This Post Helpful? 0
  • +
  • -

#7 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Re: Make my slider a clickable area

Posted 13 October 2012 - 04:12 AM

Here you go, I copied the whole code of the page.

<?php global $ids;
	$ids = array();
	$arr = array();
	$responsive = 'on' != get_option('simplepress_responsive_layout') ? false : true;
	$featured_auto_class = '';
	if ( 'on' == get_option('simplepress_slider_auto') ) $featured_auto_class .= ' et_slider_auto et_slider_speed_' . get_option('simplepress_slider_autospeed');
	$i=1;
	
	$width = 954;
	$height = 375;
	$width_small = 83;
	$height_small = 83;
			
	$featured_cat = get_option('simplepress_feat_cat'); 
	$featured_num = get_option('simplepress_featured_num'); 
		
	if (get_option('simplepress_use_pages') == 'false') query_posts("showposts=$featured_num&cat=".get_catId($featured_cat));
	else {
		global $pages_number;
		
		if (get_option('simplepress_feat_pages') <> '') $featured_num = count(get_option('simplepress_feat_pages'));
		else $featured_num = $pages_number;
				
		query_posts(array('post_type' => 'page',
						'orderby' => 'menu_order',
						'order' => 'ASC',
						'post__in' => (array) get_option('simplepress_feat_pages'),
						'showposts' => (int) $featured_num));
	};
			
	while (have_posts()) : the_post();
		global $post;	
		$arr[$i]["title"] = truncate_title(35,false);
		$arr[$i]["fulltitle"] = truncate_title(35,false);
		
		$arr[$i]["excerpt"] = truncate_post(400,false);
		$arr[$i]["excerpt_small"] = truncate_post(80,false);
		
		$arr[$i]["permalink"] = get_permalink();
				
		$arr[$i]["thumbnail"] = get_thumbnail($width,$height,'',$arr[$i]["fulltitle"],$arr[$i]["fulltitle"]);
		$arr[$i]["thumb"] = $arr[$i]["thumbnail"]["thumb"];
		
		$arr[$i]["thumbnail_small"] = get_thumbnail($width_small,$height_small,'',$arr[$i]["fulltitle"],$arr[$i]["fulltitle"]);
		$arr[$i]["thumb_small"] = $arr[$i]["thumbnail_small"]["thumb"];
		
		$arr[$i]["use_timthumb"] = $arr[$i]["thumbnail"]["use_timthumb"];

		$i++;
		$ids[] = $post->ID;
	endwhile; wp_reset_query();	?>
    
  <div id="featured" class="<?php if ( $responsive ) echo 'flexslider' . $featured_auto_class; else echo 'et_default_slider'; ?>">
   	<?php if ( $responsive ) { ?>
		<ul class="slides">
	<?php } else { ?>
		<div id="slides">
	<?php } ?>
    	<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
        <?php if ( $responsive ) { ?>
			<li class="slide">
		<?php } else { ?>
			<div class="slide <?php if($i == 1) echo('active'); ?>">
		<?php } ?>
            <div class="slider_image">
				<?php print_thumbnail($arr[$i]["thumb"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width, $height, ''); ?>
				<div class="slider_overlay"></div>
            </div>
            <div class="banner">
            <h2><?php echo esc_html($arr[$i]["title"]); ?></h2>
            <?php echo($arr[$i]["excerpt"]); ?>
            <br class="clear" />
            <span><a href="<?php echo esc_url($arr[$i]["permalink"]); ?>"><?php esc_html_e('read more','SimplePress'); ?></a></span>
            </div>
        <?php if ( $responsive ) { ?>
			</li> <!-- end .slide -->
		<?php } else { ?>
			</div> <!-- end .slide -->
		<?php } ?>
        <?php }; ?>
    <?php if ( $responsive ) { ?>
		</ul> <!-- end .slides -->
	<?php } else { ?>
		</div> <!-- end #slides -->
	<?php } ?>	
      <span class="slider_shadow"></span>
      <div id="switcher"> 
      	  <?php for ($i = 1; $i <= $featured_num; $i++) { ?>
       	  <div class="item">
              <div class="wrap <?php if($i == 1) echo('active'); ?>">
               	<span class="image">
					<?php print_thumbnail($arr[$i]["thumb_small"], $arr[$i]["use_timthumb"], $arr[$i]["fulltitle"], $width_small, $height_small, ''); ?>
					<span class="slider_small_overlay"></span>
				</span>
                  <div class="hover">
                      <span><?php echo esc_html($arr[$i]["fulltitle"]); ?></span>
                      <br class="clear" />
                      <?php echo($arr[$i]["excerpt_small"]); ?>
                  </div>
              </div>
          </div>
          <?php }; ?>
      </div><!-- #switcher --> 
    </div><!-- end #featured --> 

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Make my slider a clickable area

Posted 13 October 2012 - 05:20 PM

that’s PHP code, which is totally useless when it comes to JS or HTML issues. we need the HTML code as seen in the browser.
Was This Post Helpful? 0
  • +
  • -

#9 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Re: Make my slider a clickable area

Posted 14 October 2012 - 10:19 AM

Ok here you go, sorry I haven't understood what you needed, hope this time around ir will be fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>francismbadinga | Précher un Evangile qui impacte la société</title>

<link rel="stylesheet" href="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="francismbadinga RSS Feed" href="http://localhost/wordpressFr/?feed=rss2" />
<link rel="alternate" type="application/atom+xml" title="francismbadinga Atom Feed" href="http://localhost/wordpressFr/?feed=atom" />
<link rel="pingback" href="http://localhost/wordpressFr/xmlrpc.php" />
<script type="text/javascript">
	document.documentElement.className = 'js';
</script>
<link rel="alternate" type="application/rss+xml" title="francismbadinga &raquo; Flux" href="http://localhost/wordpressFr/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="francismbadinga &raquo; Flux des commentaires" href="http://localhost/wordpressFr/?feed=comments-rss2" />
<meta content="SimplePress v.4.3" name="generator"/><link rel='stylesheet' id='admin-bar-css'  href='http://localhost/wordpressFr/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-css-css'  href='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/shortcodes/css/shortcodes.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-responsive-css-css'  href='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/shortcodes/css/shortcodes_responsive.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='fancybox-css'  href='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.css?ver=1.3.4' type='text/css' media='screen' />
<link rel='stylesheet' id='et_page_templates-css'  href='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/page_templates/page_templates.css?ver=1.8' type='text/css' media='screen' />
<link rel='stylesheet' id='background-manager-pub-css'  href='http://localhost/wordpressFr/wp-content/plugins/background-manager/resources/css/pub.css?ver=1.0.25' type='text/css' media='all' />
<script type="text/javascript">
//<![CDATA[
var background_manager_ajax = { url: 'http://localhost/wordpressFr/wp-admin/admin-ajax.php', action: 'background-manager', nonce: 'bcc1d2177d', nonceresponse: 'ebb82ef357' }; 
//]]>
</script>
<script type='text/javascript' src='http://localhost/wordpressFr/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpressFr/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpressFr/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.3.1" />
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }
</style>
<style type="text/css" media="screen">body { background-image: url('http://localhost/wordpressFr/wp-content/uploads/2012/04/Background-FrancisWitheGray.jpg');background-position: top left;background-repeat: repeat;background-attachment: scroll; } </style>
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/css/ie6style.css" />
    <script type="text/javascript" src="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">DD_belatedPNG.fix('img#logo, .slider_image img, .banner, .banner .readmore, .wrap .image img, .thumb div .image img, div.avatar span.overlay');</script>
<![endif]--> 
<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/css/ie7style.css" />
<![endif]--> 
</head>
<body class="home blog logged-in admin-bar custom-background gecko et_includes_sidebar">
<div class="wrapper">
  <a href="http://localhost/wordpressFr">	<img src="http://localhost/wordpressFr/wp-content/uploads/2012/05/logo_blank.png" alt="francismbadinga" id="logo"/></a>
    
    <div id="navwrap">
        <span class="nav_top"></span>
		            <ul class="nav superfish">
                                    <li class="current_page_item"><a href="http://localhost/wordpressFr">Home</a></li>
                                
                <li class="page_item page-item-724"><a href="http://localhost/wordpressFr/?page_id=724">About</a></li>
<li class="page_item page-item-164"><a href="http://localhost/wordpressFr/?page_id=164">Full Width</a></li>
<li class="page_item page-item-736"><a href="http://localhost/wordpressFr/?page_id=736">Profession de foi</a></li>
<li class="page_item page-item-757"><a href="http://localhost/wordpressFr/?page_id=757">Test</a></li>
<li class="page_item page-item-235"><a href="http://localhost/wordpressFr/?page_id=235">What I Do</a></li>
                	<li class="cat-item cat-item-3"><a href="http://localhost/wordpressFr/?cat=3" title="Voir tous les articles classés dans Blog">Blog</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://localhost/wordpressFr/?cat=4" title="Voir tous les articles classés dans Featured">Featured</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://localhost/wordpressFr/?cat=5" title="Voir tous les articles classés dans Portfolio">Portfolio</a>
</li>
					
            </ul> <!-- end ul.nav -->
        		
		        
                <br class="clear" />
        <span class="nav_bottom"></span>
    </div><!-- #navwrap --> 	    
  <div id="featured" class="et_default_slider">
   			<div id="slides">
	    	        			<div class="slide active">
		            <div class="slider_image">
				<img src="http://localhost/wordpressFr/wp-content/uploads/et_temp/5040933810_3655104d6f_b-159027_954x375.jpg" alt='Profession de foi' width='954' height='375' />				<div class="slider_overlay"></div>
            </div>
            <div class="banner">
            <h2>Profession de foi</h2>
            Nam commodo dignissim felis vitae ullamcorper. Sed volutpat velit id purus bibendum placerat. Sed porta, nulla ac interdum ullamcorper, mi orci porta eros, nec commodo ligula dolor et arcu. Quisque ullamcorper enim vel tellus rhoncus et fermentum diam congue. Phasellus eu turpis lorem, id gravida nunc.

            <br class="clear" />
            <span><a href="http://localhost/wordpressFr/?page_id=736">read more</a></span>
            </div>
        			</div> <!-- end .slide -->
		                			<div class="slide ">
		            <div class="slider_image">
				<img src="http://localhost/wordpressFr/wp-content/uploads/et_temp/12354013_l-358575_954x375.jpg" alt='What I Do' width='954' height='375' />				<div class="slider_overlay"></div>
            </div>
            <div class="banner">
            <h2>What I Do</h2>
            Nam commodo dignissim felis vitae ullamcorper. Sed volutpat velit id purus bibendum placerat. Sed porta, nulla ac interdum ullamcorper, mi orci porta eros, nec commodo ligula dolor et arcu. Quisque ullamcorper enim vel tellus rhoncus et fermentum diam congue. Phasellus eu turpis lorem, id gravida nunc.  In bibendum nulla vel quam pretium a fringilla erat ornare. Etiam hendrerit quam sed orci...            <br class="clear" />
            <span><a href="http://localhost/wordpressFr/?page_id=235">read more</a></span>
            </div>
        			</div> <!-- end .slide -->
		                			<div class="slide ">
		            <div class="slider_image">
				<img src="http://localhost/wordpressFr/wp-content/uploads/et_temp/5040311921_f20b3122e0_b-406735_954x375.jpg" alt='Test' width='954' height='375' />				<div class="slider_overlay"></div>
            </div>
            <div class="banner">
            <h2>Test</h2>
            bfvskfsvgfvnfkvlsfv lqnkfqvq...            <br class="clear" />
            <span><a href="http://localhost/wordpressFr/?page_id=757">read more</a></span>
            </div>
        			</div> <!-- end .slide -->
		            		</div> <!-- end #slides -->
		
      <span class="slider_shadow"></span>
      <div id="switcher"> 
      	         	  <div class="item">
              <div class="wrap active">
               	<span class="image">
					<img src="http://localhost/wordpressFr/wp-content/uploads/et_temp/5040933810_3655104d6f_b-159027_83x83.jpg" alt='Profession de foi' width='83' height='83' />					<span class="slider_small_overlay"></span>
				</span>
                  <div class="hover">
                      <span>Profession de foi</span>
                      <br class="clear" />
                      Nam commodo dignissim felis vitae ullamcorper. Sed volutpat velit id purus...                  </div>
              </div>
          </div>
                 	  <div class="item">
              <div class="wrap ">
               	<span class="image">
					<img src="http://localhost/wordpressFr/wp-content/uploads/et_temp/12354013_l-358575_83x83.jpg" alt='What I Do' width='83' height='83' />					<span class="slider_small_overlay"></span>
				</span>
                  <div class="hover">
                      <span>What I Do</span>
                      <br class="clear" />
                      Nam commodo dignissim felis vitae ullamcorper. Sed volutpat velit id purus...                  </div>
              </div>
          </div>
                 	  <div class="item">
              <div class="wrap ">
               	<span class="image">
					<img src="http://localhost/wordpressFr/wp-content/uploads/et_temp/5040311921_f20b3122e0_b-406735_83x83.jpg" alt='Test' width='83' height='83' />					<span class="slider_small_overlay"></span>
				</span>
                  <div class="hover">
                      <span>Test</span>
                      <br class="clear" />
                      bfvskfsvgfvnfkvlsfv lqnkfqvq...                  </div>
              </div>
          </div>
                </div><!-- #switcher --> 
    </div><!-- end #featured --> 			<div id="quote">
			<div>
				DIEU RESERVE LA VIE ETERNEL				<br class="clear" />
			  <span>A ceux qui par la persévérance à bien faire recherchent la Gloire, l'Honneur et l'Imortalité</span>
			</div>
		</div>
        </div><!-- .wrapper --> 
<div id="strip-top"></div>
<div id="strip">
  <div> Romain Chapitre 2 Versé 7      <img class="arrow" src="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/images/strip-arrow.png" alt="" />
  </div>
</div>
<div class="wrapper">
    <div id="blurbs">
				                <div >
            <span class="titles">About</span>
            <p>This is an example of a  page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of  you Website.</p>
            <br class="clear" />
            <span class="readmore"><a href="http://localhost/wordpressFr/?page_id=724">read more</a></span>
        </div>
        				                <div style="background-image: url(http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2009/03/icon-3.gif);">
            <span class="titles">What I Do</span>
            <p>Nam commodo dignissim felis vitae ullamcorper. Sed volutpat velit id purus bibendum placerat. Sed porta, nulla ac interdum ullamcorper, mi orci porta eros, nec commodo ligula dolor et arcu. Quisque ullamcorper enim vel tellus rhoncus et fermentum diam congue. Phasellus eu turpis lorem, id gravida nunc. </p>
            <br class="clear" />
            <span class="readmore"><a href="http://localhost/wordpressFr/?page_id=235">read more</a></span>
        </div>
        				                <div >
            <span class="titles">Profession de foi</span>
            <p>Nam commodo dignissim felis vitae ullamcorper. Sed volutpat velit id purus bibendum placerat. Sed porta, nulla ac interdum ullamcorper, mi orci porta eros, nec commodo ligula dolor et arcu. Quisque ullamcorper enim vel tellus rhoncus et fermentum diam congue. Phasellus eu turpis lorem, id gravida nunc.</p>
            <br class="clear" />
            <span class="readmore"><a href="http://localhost/wordpressFr/?page_id=736">read more</a></span>
        </div>
        		
        <br class="clear" />
    </div>
    <span class="blurbs_shadow"></span>
</div>
<br class="clear" />
<div id="footer">
	Designed by  <a href="http://www.elegantthemes.com" title="Elegant Themes">Elegant Themes</a> | Powered by  <a href="http://www.wordpress.org">Wordpress</a>
</div>

<!-- Background Manager Start -->
<a id="myatu_bgm_bg_link" class="myatu_bgm_fs" href="#" style="display:none"></a>
<!-- Background Manager End -->
<script type='text/javascript' src='http://localhost/wordpressFr/wp-includes/js/admin-bar.js?ver=20111130'></script>
<script type='text/javascript' src='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/page_templates/js/fancybox/jquery.easing-1.3.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/epanel/page_templates/js/et-ptemplates-frontend.js?ver=1.1'></script>
		<div id="wpadminbar" class="nojq nojs" role="navigation">
			<div class="quicklinks">
				<ul id="wp-admin-bar-root-default" class="ab-top-menu">
		<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://localhost/wordpressFr/wp-admin/about.php" title="À propos de WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
		<li id="wp-admin-bar-about" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/about.php">À propos de WordPress</a>		</li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
		<li id="wp-admin-bar-wporg" class=""><a class="ab-item" tabindex="10" href="http://www.wordpress-fr.net/">WordPress.org</a>		</li>
		<li id="wp-admin-bar-documentation" class=""><a class="ab-item" tabindex="10" href="http://codex.wordpress.org">Documentation</a>		</li>
		<li id="wp-admin-bar-support-forums" class=""><a class="ab-item" tabindex="10" href="http://www.wordpress-fr.net/support/">Forums de support</a>		</li>
		<li id="wp-admin-bar-feedback" class=""><a class="ab-item" tabindex="10" href="">Remarque</a>		</li></ul></div>		</li>
		<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://localhost/wordpressFr/wp-admin/">francismbadinga</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
		<li id="wp-admin-bar-dashboard" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/">Tableau de bord</a>		</li></ul><ul id="wp-admin-bar-appearance" class=" ab-submenu">
		<li id="wp-admin-bar-themes" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/themes.php">Thèmes</a>		</li>
		<li id="wp-admin-bar-widgets" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/widgets.php">Widgets</a>		</li>
		<li id="wp-admin-bar-menus" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/nav-menus.php">Menus</a>		</li>
		<li id="wp-admin-bar-background" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/themes.php?page=xYzc4O">Arrière-plan</a>		</li></ul></div>		</li>
		<li id="wp-admin-bar-updates" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/update-core.php" title="1 mise à jour de WordPress, 2 mises à jour d&rsquo;extensions, 7 mises à jour de thèmes"><span class="ab-icon"></span><span class="ab-label">10</span></a>		</li>
		<li id="wp-admin-bar-comments" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/edit-comments.php" title="0 commentaire en attente de modération"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>		</li>
		<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://localhost/wordpressFr/wp-admin/post-new.php" title="Ajouter"><span class="ab-icon"></span><span class="ab-label">Nouveau</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
		<li id="wp-admin-bar-new-post" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/post-new.php">Article</a>		</li>
		<li id="wp-admin-bar-new-media" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/media-new.php">Fichier multimédia</a>		</li>
		<li id="wp-admin-bar-new-link" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/link-add.php">Lien</a>		</li>
		<li id="wp-admin-bar-new-page" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/post-new.php?post_type=page">Page</a>		</li>
		<li id="wp-admin-bar-new-user" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/user-new.php">Utilisateur</a>		</li></ul></div>		</li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
		<li id="wp-admin-bar-search" class=" admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost/wordpressFr/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" tabindex="10" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Recherche"/></form></div>		</li>
		<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://localhost/wordpressFr/wp-admin/profile.php" title="Mon compte">Salutations, admin<img alt='' src='http://1.gravatar.com/avatar/d927761d7195ce2e7f1d2995c164a61b?s=16&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class=" ab-submenu">
		<li id="wp-admin-bar-user-info" class=""><a class="ab-item" tabindex="-1" href="http://localhost/wordpressFr/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/d927761d7195ce2e7f1d2995c164a61b?s=64&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>admin</span></a>		</li>
		<li id="wp-admin-bar-edit-profile" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-admin/profile.php">Modifier mon profil</a>		</li>
		<li id="wp-admin-bar-logout" class=""><a class="ab-item" tabindex="10" href="http://localhost/wordpressFr/wp-login.php?action=logout&_wpnonce=32acd7da42">Se déconnecter</a>		</li></ul></div>		</li></ul>			</div>
		</div>

			
<script src="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/js/easing.js" type="text/javascript"></script> 
<script src="http://localhost/wordpressFr/wp-content/themes/SimplePressNwVersion/js/superfish.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[
	jQuery.noConflict();

	jQuery('ul.superfish').superfish({ 
		delay:       300,                            // one second delay on mouseout 
		animation:   {'marginLeft':'0px',opacity:'show'},  // fade-in and slide-down animation 
		speed:       'fast',                          // faster animation speed
		onBeforeShow: function(){ this.css('marginLeft','20px'); }, 			
		autoArrows:  true,                           // disable generation of arrow mark-up 
		dropShadows: false                            // disable drop shadows 
	});
	
			
	jQuery('.gallery_item .thumb').hover(function() {
		jQuery(this).children('.readmore').animate({opacity:'show', 'top':'170px'}, "fast");
	}, function() {
		jQuery(this).children('.readmore').animate({opacity:'hide', 'top':'148px'}, "fast");
	});
	
	var pagemenuwidth = jQuery("ul.nav").width();
	var pagemleft = Math.round((960 - pagemenuwidth) / 2);
	jQuery("ul.nav").css('padding-left',pagemleft);

	
	jQuery('div#navwrap ul.nav li a').hover(function() {
		jQuery(this).animate({opacity: .4}, "fast");
	}, function() {
		jQuery(this).animate({opacity: 1}, "fast");
	});
	
	jQuery('img#logo').hover(function() {
		jQuery(this).animate({opacity: .6}, "fast");
	}, function() {
		jQuery(this).animate({opacity: 1}, "fast");
	});
	
	jQuery('.thumb div .image').hover(function() {
		jQuery(this).animate({opacity: .8}, "fast");
	}, function() {
		jQuery(this).animate({opacity: 1}, "fast");
	});

		jQuery('div#switcher div.item div.wrap').hover(function() {
		jQuery(this).children('div.hover').animate({opacity: "show", top: "-140"}, "fast");
	}, function() {
		jQuery(this).children('div.hover').animate({opacity: "hide", top: "-160"}, "fast");
	});
	
	<!---- et_switcher plugin v1.4 ---->
	(function($)
	{
		$.fn.et_switcher = function(options)
		{
			var defaults =
			{
			   slides: '>div',
			   activeClass: 'active',
			   linksNav: '',
			   findParent: true, //use parent elements in defining lengths
			   lengthElement: 'li', //parent element, used only if findParent is set to true
			   useArrows: false,
			   arrowLeft: 'prevlink',
			   arrowRight: 'nextlink',
			   auto: false,
			   autoSpeed: 4000			};

			var options = $.extend(defaults, options);

			return this.each(function()
			{
				var slidesContainer = jQuery(this);
				slidesContainer.find(options.slides).hide().end().find(options.slides).filter(':first').css('display','block');
		 
				if (options.linksNav != '') {
					var linkSwitcher = jQuery(options.linksNav);
									
					linkSwitcher.click(function(){	
				
						var targetElement;

						if (options.findParent) targetElement = jQuery(this).parent();
						else targetElement = jQuery(this);
						
						if (targetElement.hasClass('active')) return false;
						
						jQuery('div.item .active').stop(true,true).animate({marginTop: '0px'},500,function(){
							jQuery(this).removeClass('active');
							
						});
						jQuery(this).stop(true,true).animate({marginTop: '-15px'},500,function(){
							jQuery(this).addClass('active');
							
						});
						var ordernum = targetElement.prevAll(options.lengthElement).length;
					
						slidesContainer.find(options.slides).filter(':visible').hide().end().end().find(options.slides).filter(':eq('+ordernum+')').stop(true,true).fadeIn(700);
						
						jQuery('div.#slides div.slide div.banner').css('top', '0px');
						slidesContainer.find(options.slides).filter(':visible').children('div').stop(true,true).animate({top: '90px'}, 300);	
						
						if (typeof interval != 'undefined') {
							clearInterval(interval);
							auto_rotate();
						};
						
						return false;
					});
				};
				
				jQuery('#'+options.arrowRight+', #'+options.arrowLeft).click(function(){
				  
					var slideActive = slidesContainer.find(options.slides).filter(":visible"),
						nextSlide = slideActive.next(),
						prevSlide = slideActive.prev();

					if (jQuery(this).attr("id") == options.arrowRight) {
						if (nextSlide.length) {
							var ordernum = nextSlide.prevAll().length;                        
						} else { var ordernum = 0; }
					};

					if (jQuery(this).attr("id") == options.arrowLeft) {
						if (prevSlide.length) {
							var ordernum = prevSlide.prevAll().length;                  
						} else { var ordernum = slidesContainer.find(options.slides).length-1; }
					};

					slidesContainer.find(options.slides).filter(':visible').hide().end().end().find(options.slides).filter(':eq('+ordernum+')').stop().fadeIn(700);

					if (typeof interval != 'undefined') {
						clearInterval(interval);
						auto_rotate();
					};

					return false;
				});   

				if (options.auto) {
					auto_rotate();
				};
				
				function auto_rotate(){
					interval = setInterval(function(){
						var slideActive = slidesContainer.find(options.slides).filter(":visible"),
							nextSlide = slideActive.next();
					 
						if (nextSlide.length) {
							var ordernum = nextSlide.prevAll().length;                        
						} else { var ordernum = 0; }
					 
						if (options.linksNav === '') 
							jQuery('#'+options.arrowRight).trigger("click");
						else 		 		
							linkSwitcher.filter(':eq('+ordernum+')').trigger("click");
					},options.autoSpeed);
				};
			});
		}
	})(jQuery);
			
	var $featuredArea = jQuery('#featured #slides');
	
	jQuery(window).load( function(){
					if ($featuredArea.length) {
				$featuredArea.css( 'backgroundImage', 'none' ).et_switcher({
					linksNav: '#switcher div div.wrap',
					auto: true,
					autoSpeed: 4000,
					findParent: true,
					lengthElement: 'div'
				});
			};
			} );

	jQuery('div.#slides div.active div.banner').css('top', '90px');
	//]]>	
</script> 
</body>
</html>
	

Was This Post Helpful? 0
  • +
  • -

#10 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Re: Make my slider a clickable area

Posted 22 October 2012 - 10:08 AM

I am still waiting for an answer I really need you help guys.
Was This Post Helpful? 0
  • +
  • -

#11 IRodMan  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 12-March 10

Re: Make my slider a clickable area

Posted 24 October 2012 - 02:23 AM

View PostDormilich, on 14 October 2012 - 12:20 AM, said:

that’s PHP code, which is totally useless when it comes to JS or HTML issues. we need the HTML code as seen in the browser.


I've done what you asked me to, do you have a solution for me know?
Was This Post Helpful? 0
  • +
  • -

#12 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6107
  • View blog
  • Posts: 23,662
  • Joined: 23-August 08

Re: Make my slider a clickable area

Posted 24 October 2012 - 05:32 AM

You've done nothing in TWO WEEKS???

Shouldn't it be as easy as selecting the container & adding a click handler?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1