Web Analytics Made Easy -
StatCounter Numbered Slideshow - CodingForum

Announcement

Collapse
No announcement yet.

Numbered Slideshow

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    Looks like http://interface.eyecon.ro/docs/slideshow, (see the example)
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      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.

      Comment


      • #4
        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; Apr 6, 2009, 02: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.

        Comment


        • #5
          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.

          Comment

          Working...
          X