JavaScript - Any Tutorials On Creating A Slideshow W/thumbnails Jquery Or Javascript

Hi there!

i want to know, what should I do to make the j query simple slide show repeat playing as currently it stops when the slide show finishes.

How can I do it repetitive?

I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next.

The source was used from Edit fiddle - JSFiddle

the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC.

I am open to any suggestions.

Code:

 <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
    
  
  <style type='text/css'>
    .cycle-slide {
    width: 100%;
    text-align: center;
}
img {
    max-width: 300px;
}

#next {
    float: right;
}
#prev {
    float: left;
}
.center {
    text-align: center;
}
  </style>
  


<script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){ 
var slideshow = $('.cycle-slideshow');
    maxSlides = slideshow.data('cycle.opts').slideCount;

slideshow.on({
    'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        UpdateTitles();
    }
});

function UpdateTitles(){
    var currentSlide = slideshow.data('cycle.opts').currSlide;
    activeSlide = $(".cycle-slide-active");
    activeTitle = activeSlide.data('title');
    
    if(currentSlide == 0){
        nextTitle = activeSlide.next().data('title');
        prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
    }
    else if(currentSlide == maxSlides-1){
        prevTitle = activeSlide.prev().data('title');
        nextTitle = $(".cycle-slide").eq(0).data('title');
    }
    else {
        nextTitle = activeSlide.next().data('title');
        prevTitle = activeSlide.prev().data('title');
    }
    
    $('h1').html(activeTitle);
    $('#prev').html("Previous: "+prevTitle);
    $('#next').html("Next: "+nextTitle);
}

UpdateTitles();
});//]]>  

</script>

I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks.

Here's the code:
Code:

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 7;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
});

I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one.

I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript.

I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas?

Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230.

I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks!

Hi,

Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails):

http://www.gcmingati.net/wordpress/w...vwt/index.html

I constructed the slideshow:

http://backstageweb.net/Salon/slideshowcode.htm

...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit).

Thanks.

John

So i purchased a template from template monster for wordpress.

http://www.templatemonster.com/demo/28861.html

On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link.

My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain.
---------------------------------------------------------------------
<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>


------------------------------------------------------------------------

Full code below


<div id="thumbs" class="navigation">

<ul class="thumbs noscript">

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" />

</a>

<div class="caption">

<div class="indent1">in grey</div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" />

</a>

<div class="caption">

<div class="indent1">in grey </div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li class="last">

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

</ul>

</div>



</div>

</div>

Hi, I have a php script that gets all images in my directory and outputs them as gallery[0]=firstimage.jpg, [1], [2], ... The php script is supposed to work with the javascript, so to cover all angles here is the php

Code:

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.jpeg$"); //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'gallery['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var gallery=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

Then this javascript uses the array for a slideshow, only I want to list each image as a small thumbnail. This will allow me to view the images on my webserver much more eye friendly.

Code:

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="images/bear.gif" />
</div>

I'm not sure how to go about listing all the images. I was thinking about using definition lists and only selecting the last 10 images. I can insert images into the definition description so I thought that was my best shot. I get stuck on choosing the images from the array, I attempt something like the following
Code:

<img src="gallery[gallery.length-11]" /> </dd>

But that looks for a file, not the array. I then modified the script to get me the most recent images (if I were to add/remove images). Does this look correct?

Code:

<script type="text/javascript">
var curimg=0
function newestimg(){
document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg
} 

</script>

Hi,

My JQuery click submission button on a form works fine. However I have several forms each with several buttons on one page and want to create a JQuery template/placeholder code to deal with all requests.

Firstly is this possible?

Secondly I had a go myself. I tried several alternatives none of which worked, below is my cleanest attempt.

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (Button,Form,File){
$('#placeholder').click(function(Button,Form,File){
$('Button').click(function(){
	var data = $('Form').serialize();
	$.post ('File',data, function(){
				alert("Thank you for your submission");
			$('Form').each (function(){
				this.reset();
				});
				return false;
			});
		});
	});
});
</script>
</head>
<body>
<form action="" name="submissions" id="submissions">
<input type="text" name="person" id="person">
<br />
<br />
<input type="text" name="item" id="item">
<br />
<br />
<input type="button" name="placeholder('send','submissions','insertsubmissions.php')" id="placeholder('send','submissions','insertsubmissions.php')" >
</form>

I realise in this version I have removed the #, I did try other alternatives with the # in which didn't work, but I realise that might just mean I didn't try the right one.

Hi everyone
I need some help creating a function which does the same thing for the chosen elements.

I have #design1 #design1servicetext and #design1servicebutton.

Code:

//Service hover//
$('#design1').mouseenter(function (){
	$('#design1servicetext').css('background-position', '0 -91px')  
	$('#design1servicebutton').css('background-position', '0 -33px')
	})
			   .mouseleave(function (){
	$('#design1servicetext').css('background-position', '0 0px')
	$('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//

How can I create a function, in which I have to choose 3 divs to do the animation?

A function like
Code:

animatebg('#design1','#design1servicetext','#design1servicebutton');

Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance!

I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax.
I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope.
I also tried writing separate plugin for my need but i don't have clear idea how does it work.

So please either suggest a way or give me link to article which is simple to understand and can clear how it work.

Hi,

I don't really know much about Javascript but I was wondering if anyone could tell me how to change this script so when you click on a link it doesn't open in a new window?

Any help would be much appreciated!

Code:

<script language="JavaScript1.1">
<!--


var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script><br>



<a href="javascript:gotoshow()"><img src="/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg" name="slide" border=0 width=429 height=90></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-3-for-1.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-London-89.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-Brussels-special-155.jpg")
slideshowlinks("/dl/holidayoffers.jsp?destination=DISCOVER_PARIS_BREAKS,RE,TO","/dl/holidayoffers.jsp?destination=MAILER_EUROSTAR_3_FOR_1,RE,TO,","/dl/holidayoffers.jsp?destination=london_rail_breaks,RE,TO,","/dl/holidayoffers.jsp?destination=DISCOVER_BRUSSELS,RE,TO,")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p>

Hey guys;

I work as a webmaster for my school and I am trying to develop a JavaScript slideshow for pictures. I am a beginner to JavaScript, so if my coding is off, please let me know. What I am trying to do is have multiple automatic slideshows for this website. I want each of the slideshow boxes to run through the images, however the coding is wrong, causing the first box to switch through the images for the second box and the second one not switching at all. Sorry if thats confusing, please ask if you need any other specifications.

Here is my JavaScript coding:

//Slideshow

//September 18
NewImg = new Array ("Pictures/Sept18/290.jpg", "Pictures/Sept18/293.jpg", "Pictures/Sept18/304.jpg", "Pictures/Sept18/310b.jpg", "Pictures/Sept18/311.jpg", "Pictures/Sept18/317.jpg", "Pictures/Sept18/323.jpg", "Pictures/Sept18/327.jpg", "Pictures/Sept18/328.jpg", "Pictures/Sept18/331.jpg", "Pictures/Sept18/333.jpg", "Pictures/Sept18/337.jpg", "Pictures/Sept18/339.jpg", "Pictures/Sept18/340.jpg", "Pictures/Sept18/342.jpg", "Pictures/Sept18/344.jpg", "Pictures/Sept18/346.jpg", "Pictures/Sept18/351.jpg", "Pictures/Sept18/352.jpg", "Pictures/Sept18/353.jpg", "Pictures/Sept18/354.jpg", "Pictures/Sept18/356.jpg", "Pictures/Sept18/359.jpg", "Pictures/Sept18/360b.jpg", "Pictures/Sept18/361.jpg", "Pictures/Sept18/362.jpg", "Pictures/Sept18/363b.jpg", "Pictures/Sept18/366.jpg", "Pictures/Sept18/370.jpg", "Pictures/Sept18/374b.jpg", "Pictures/Sept18/379.jpg", "Pictures/Sept18/385.jpg", "Pictures/Sept18/391.jpg", "Pictures/Sept18/392.jpg", "Pictures/Sept18/393.jpg", "Pictures/Sept18/394.jpg", "Pictures/Sept18/398.jpg", "Pictures/Sept18/408.jpg", "Pictures/Sept18/410.jpg", "Pictures/Sept18/415.jpg", "Pictures/Sept18/419.jpg", "Pictures/Sept18/427.jpg", "Pictures/Sept18/428b.jpg", "Pictures/Sept18/429.jpg", "Pictures/Sept18/432.jpg", "Pictures/Sept18/435.jpg", "Pictures/Sept18/440.jpg", "Pictures/Sept18/441.jpg", "Pictures/Sept18/443.jpg", "Pictures/Sept18/448.jpg", "Pictures/Sept18/449.jpg", "Pictures/Sept18/450.jpg", "Pictures/Sept18/455.jpg", "Pictures/Sept18/456.jpg", "Pictures/Sept18/460.jpg", "Pictures/Sept18/461.jpg", "Pictures/Sept18/463.jpg", "Pictures/Sept18/467.jpg", "Pictures/Sept18/470.jpg", "Pictures/Sept18/474b.jpg", "Pictures/Sept18/478b.jpg", "Pictures/Sept18/481.jpg", "Pictures/Sept18/484.jpg", "Pictures/Sept18/486.jpg", "Pictures/Sept18/491b.jpg", "Pictures/Sept18/496.jpg", "Pictures/Sept18/498b.jpg", "Pictures/Sept18/503.jpg", "Pictures/Sept18/505b.jpg", "Pictures/Sept18/506b.jpg", "Pictures/Sept18/508.jpg", "Pictures/Sept18/509.jpg", "Pictures/Sept18/514.jpg", "Pictures/Sept18/525b.jpg", "Pictures/Sept18/527.jpg", "Pictures/Sept18/531b.jpg", "Pictures/Sept18/532b.jpg", "Pictures/Sept18/533b.jpg", "Pictures/Sept18/538b.jpg", "Pictures/Sept18/542.jpg", "Pictures/Sept18/544b.jpg", "Pictures/Sept18/547.jpg", "Pictures/Sept18/549.jpg", "Pictures/Sept18/557b.jpg", "Pictures/Sept18/560.jpg", "Pictures/Sept18/565.jpg", "Pictures/Sept18/567.jpg", "Pictures/Sept18/571b.jpg", "Pictures/Sept18/574b.jpg", "Pictures/Sept18/583b.jpg", "Pictures/Sept18/587.jpg", "Pictures/Sept18/588.jpg", "Pictures/Sept18/597b.jpg", "Pictures/Sept18/610b.jpg");

var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 2500;
var lock = false;
var run;

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.sept18.src = NewImg[ImgNum];
}
}

function auto() {
if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}

//September 25
NewImg = new Array ("Pictures/Sept25/626b.jpg", "Pictures/Sept25/633.jpg", "Pictures/Sept25/634.jpg", "Pictures/Sept25/636.jpg", "Pictures/Sept25/639.jpg");

var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 2500;
var lock = false;
var run;

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.sept18.src = NewImg[ImgNum];
}
}

function auto() {
if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}

And here is where in the HTML the coding is referred to:

<?php include 'top.php' ?>

<img src="Images/Bar_Images/home.png" class="header" />
<p>Welcome to the TCNJ Women's Club Rugby homepage!</p><br />
<p class="sub">Pictures</p>
<div class="box">
<a href="http://www.tcnj.edu/~rugby/sept18.php"><img name="sept18" src="Pictures/Sept18/290.jpg" class="slides" align="left" /></a>
<p align="right">September 18th, 2010</p>
</div>
<div class="box">
<a href="http://www.tcnj.edu/~rugby/sept25.php"><img name="Sept25" src="Pictures/Sept25/626b.jpg" class="slides" align="left" /></a>
<p align="right">September 25th, 2010</p>
</div>

<?php include 'bottom.php' ?>

As you can see, I am using PHP to refer to other pages, but the JavaScript coding is referred to in the <head> and the <body> tag is onloading the auto() function. Please help me fix this code, or if it is impossible to do it this way, let me know. Thank you.

Hi,

Pretty simple problem I hope Ive somehow changed something in my coding on my html page to stop the slide show working correctly.

Any ideas

heres the link: http://sparekeys.org.uk/

Please help i know its something stupid but I just cant see it.

I have created two pages. One with a selection of images one with a working slideshow.

How do I get it that a user can select 4 images that are then transferred to the slideshow and played in that slideshow?

I appolgise if this is a simple fix but I am very new to JavaScript. Thank you all in advance

Hi there,

I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me.

I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Lyons Design and Print</title>
	<style type="text/css" media="all">
 
 
body
{
background-image:url('background.jpg');
}
 
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
 
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
 
#nav li {
display:inline-block;
padding:0;
margin:0;
}
 
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
 
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
 
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
 
#nav li:first-child a {
border-left:1px solid #42432d;
}
 
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a, 
#large format photo copying #nav-large format photo copying a, 
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
 
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover, 
#large format photo copying #nav-large format photo copying a:hover, 
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
 
#nav a:active {
background:#e35a00;
color:#fff;
}
 
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
 
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
 
 
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
 
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
 
</style>
</head>
 
<body>
 
<div class="header"><img src="logo.jpg"></div>
 
  <ul id="nav">
    <li id="nav-Home"><a href="Home.html">Home</a></li>
    <li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
    <li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
    <li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
    <li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
    <li id="nav-Contacts"><a href="#">Contacts</a></li>
    <li id="nav-About Us"><a href="#">About Us</a></li></ul>
 
 
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
 
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
 
<embed src="beatles.mid" width="144" height="60">
 
</body>