Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts

    Numbered Slideshow

    Anyone know how or where I could find a numbered slideshow like on this site

    http://www.oxmonline.com/
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Looks like http://interface.eyecon.ro/docs/slideshow, (see the example)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    thanks abduraooft
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Now I want the numbers to show up on the black faded bar, I'll upload it now so yall can see.

    Code:
    <!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>Slideshow demo - Interface plugin for jQuery</title> 
    		<script type="text/javascript" src="jquery.js"></script> 
    		<script type="text/javascript" src="interface.js"></script> 
    <style type="text/css" media="screen"> 
    *{margin:0; padding:0;}
    body
    {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #fff;
    }
    a
    {
    	text-decoration: none;
    }
    #slideShow1
    {
    	height: 235px;
    	width: 419px;
    	border: 1px solid #ccc;
    }
    .pagelinks a
    {
    	font-weight: bold;
    	color: #666;
    }
    .slideCaption
    {
    	background-color: #000;
    	padding: 4px;
    	text-align: center;
    	font-weight: bold;
    	filter:alpha(opacity=70);
    	-moz-opacity:.70;
    	opacity:.70;
    }
    .pagelinks a.activeSlide
    {
    	color: #f90;
    }
    /* this is for IE so the prev/next links can be hovered*/
    .nextSlide,.prevSlide
    {
    	background-image: url(images/spacer.gif);
    }
    .nextSlide:hover
    {
    	background-image: url(images/nextslide.jpg);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    }
    .prevSlide:hover
    {
    	background-image: url(images/prevslide.jpg);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    }
    .inputsTooltip
    {
    	border: 1px solid #ccc;
    	background-color: #eee;
    	padding: 4px;
    	color: #333;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	filter:alpha(opacity=70);
    	-moz-opacity:.70;
    	opacity:.70;
    }
    #tooltipURL
    {
    	display: none;
    }
    </style> 
    </head> 
     
    <body> 
    <p>Interface Slideshow demo - Interface plugin for jQuery</p> 
    <div id="slideShow1"></div> 
    <script type="text/javascript"> 
    $(document).ready(
    	function()
    	{
    		$.slideshow(
    			{
    				container : 'slideShow1',
    				loader: 'images/slideshow_loader.gif',
    				linksPosition: 'bottom',
    				linksClass: 'pagelinks',
    				linksSeparator : ' | ',
    				fadeDuration : 400,
    				activeLinkClass: 'activeSlide',
    				nextslideClass: 'nextSlide',
    				prevslideClass: 'prevSlide',
    				captionPosition: 'bottom',
    				captionClass: 'slideCaption',
    				autoplay: 5,
    				random: false,
    				images : [
    					{
    						src: 'http://www.oxmonline.com/files/imagecache/slideshow/files/slides/fnr4_slide.jpg',
    						caption: 'Panda Dynamic'
    					},
    					{
    						src: 'http://www.oxmonline.com/files/imagecache/slideshow/files/slides/sing_slide.jpg',
    						caption: 'Panda Actual'
    					},
    					{
    						src: 'http://www.oxmonline.com/files/imagecache/slideshow/files/slides/benheck-slide.jpg',
    						caption: 'Fiat Panda'
    					},
    					{
    						src: 'http://www.oxmonline.com/files/imagecache/slideshow/files/slides/dishwasher_slide.png',
    						caption: 'Panda Active'
    					},
    					{
    						src: 'http://www.oxmonline.com/files/imagecache/slideshow/files/slides/metallica_slide.jpg',
    						caption: 'Panda Active'
    					}
    				]
    			}
    		)
    				
    		$('a').ToolTip(
    			{
    				className: 'inputsTooltip',
    				position: 'mouse'
    			}
    		);
    	}
    );
    </script> 
    </body> 
    </html>
    http://www.habugfx.com/slideshow.html

    Some reason the images or styles dont wanna show up when i uploaded it but locally it works fine.
    Last edited by PitbullMean; 04-06-2009 at 07:08 PM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Can some one assist me?
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •