jquery slider

I've used jquery to create a slider. However, it requires you to hit a button to get to the next graphic. Can I make this automatic, or do I have to use different code?
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;



  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

Open in new window

designaireAsked:
Who is Participating?
 
Atique AnsariCommented:
I have checked the attached code and it works.

Try this and let me know results.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

function autoClickSliderControll()
  {
  	$('#rightControl').trigger('click');
  }
  
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  setInterval("autoClickSliderControll();", 500);
});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">
<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
 
Atique AnsariCommented:
I have tested the code, but I think it will work

Let me know if you need more help.
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;



  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
        .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
        currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
        // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } 
  
  function autoClickSliderControll()
  {
 	$('#rightControl').trigger('click');
  }
  
  setInterval("autoClickSliderControll();", 500);
});
</script>

Open in new window

0
 
designaireAuthor Commented:
thank you I will try it tonight.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
designaireAuthor Commented:
Sorry, it didn't work but thanks for trying. It seems like it might need a lot more code that I have.
0
 
Atique AnsariCommented:
Can you provide me with the link?
0
 
designaireAuthor Commented:
0
 
Atique AnsariCommented:
Try the attached code and see if it displays any alert message
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  function autoClickSliderControll()
  {
  	alert('In autoClickSliderControll function');
  	$('#rightControl').trigger('click');
  };
  
   setInterval("autoClickSliderControll();", 500);
});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">
<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
 
designaireAuthor Commented:
Yes, it gives an error message with IE8, which is what I'm running.

http://www.designaire.com/index_test.htm
0
 
Atique AnsariCommented:
See if attached code works.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

function autoClickSliderControll()
  {
  	alert('In autoClickSliderControll function');
  	$('#rightControl').trigger('click');
  }
  
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  setInterval("autoClickSliderControll();", 500);
});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">
<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
 
designaireAuthor Commented:
That's great!

Can you make it go back to slide one when it's done, even if I add more.

Notice I updated the point value!
0
 
Atique AnsariCommented:
I will send you code as soon as possible.
0
 
designaireAuthor Commented:
Thank you...it's not urgent.
0
 
Atique AnsariCommented:
welcome
0
 
Atique AnsariCommented:
I am done with the code. I Have tested it and it works fine.

Two changes has been made:

1) <div id="autoSlideGallery"></div> has been added to HTML.

2) autoClickSliderControll function has been changed.

 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designaire - Contact</title>
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<link rel="stylesheet" type="text/css" href="scripts/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="scripts/presets.css" media="all" />




<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:hidden; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:525px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {

}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

	function autoClickSliderControll()
	{
		$('#autoSlideGallery').trigger('click');
	}
	  
	jQuery(document).ready(function($)
	{
  		var currentPosition = 0;
		var slideWidth = 400;
		var slides = $('.slide');
		var numberOfSlides = slides.length;
		
		// Remove scrollbar in JS
		$('#slidesContainer').css('overflow', 'hidden');
		
		// Wrap all .slides with #slideInner div
		slides
			.wrapAll('<div id="slideInner"></div>')
			
			// Float left to display horizontally, readjust .slides width
			.css({
				'float' : 'left',
				'width' : slideWidth
			});
			
			// Set #slideInner width equal to total width of all slides
			$('#slideInner').css('width', slideWidth * numberOfSlides);
			
			// Insert controls in the DOM
			$('#slideshow')
				.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
				.append('<span class="control" id="rightControl">Clicking moves right</span>');
			
			// Hide left arrow control on first load
			manageControls(currentPosition);
			
			// Create event listeners for .controls clicks
			$('.control')
				.bind('click', function(){
					// Determine new position
					currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
					
					// Hide / show controls
					manageControls(currentPosition);
					
					// Move slideInner using margin-left
					$('#slideInner').animate({
						'marginLeft' : slideWidth*(-currentPosition)
					});
				});
			
		// manageControls: Hides and Shows controls depending on currentPosition
		function manageControls(position)
		{
			// Hide left arrow if position is first slide
			if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
			// Hide right arrow if position is last slide
			if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show()}
		}
		
		$('#autoSlideGallery').live('click', function(e)
		{
			// Check if on last image
			if( $('#rightControl').is(":visible") )
			{
				// if no then slide to right
				$('#rightControl').trigger('click');
			}
			else
			{
				// else slide to first
				$('#slideInner').animate({
					'marginLeft' : '0px'
				});
				
				currentPosition = 0;
				
				// Hide / show controls
				manageControls(currentPosition);
			}
		});
		
		setInterval("autoClickSliderControll();", 500);
	});
</script>

<script type="text/javascript">

	if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
		document.location = "http://www.designaire.com/ipad/index.htm";
	} 

</script>

<body>
<div id="container">

<div id="drop">
<div id="main">


<div class="top">

</div>
<div class="menuBar" >

<ul id="menuNav">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web Design</a></li>
<li><a href="graphic.htm">Graphic Design</a></li>
<li><a href="video.htm">Video Graphics</a></li>
<li><a href="art.htm">Fine Art</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>

</div>
<div class="strip">

</div>

<div class="left"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="458" id="FlashID" title="designaire">
    <param name="movie" value="images/leftFront_01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="images/leftFront_01.swf" width="435" height="458">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>

<div class="rightweb">

<div id="autoSlideGallery"></div>

<div class="slideShow">
<div id="slideshow">
     <div id="slidesContainer">




<div class="slide">        I am a creative designer with the unique ability to tailor projects to the needs of a wide client base assisting companies in communicating and attracting new business.<a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="images/keys.jpg" width="400" height="142" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a></div>
      
             <div class="slide">  My experience includes designing websites, graphics, television animation, Flash and advertising for numerous corporate, defense and non-profit companies.     <a href="xxx"><img src="images/plane.jpg" width="400" height="174" alt="xxx" /></a> </div>

             <div class="slide"> I have a deep knowledge of these industries and how they operate and have the ability to conceptualize and implement creative and easy to navigate designs.     <a href="xxx"><img src="images/computer.jpg" width="400" height="174" alt="xxx" /></a> </div>
      </div>
    </div>
  </div>
</div>
</div>




</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

Open in new window

0
 
designaireAuthor Commented:
Thank You!
0
 
Atique AnsariCommented:
Welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.