Help with Java SlideShow and CSS Style Sheet

  • BrandyQ

    (@brandyq)


    15 years, 3 months ago

    I’m having some issues with my new template. The slideshow isn’t working. Instead of fading the images into each other, it’s simply showing the ul list of the images. Does anyone know how to fix it? I feel like I’ve tried everything.

    See my issue: http://www.artesianspas (dot) com/hottubblog/

    The slideshow software is from jquery-jqshuffle.

    My Header.php file:

    <head profile="http://gmpg.org/xfn/11">
<title>
<?php if (is_home()) { ?>
<?php bloginfo('name'); ?>
-
<?php bloginfo('description'); ?>
<?php } else { ?>
<?php wp_title($sep = ''); ?>
-
<?php bloginfo('name'); ?>
<?php } ?>
</title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php }?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/superfish.css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/hoverintent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
  <div class="logo">
    <h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>">
      <?php bloginfo('name'); ?>
      -
      <?php bloginfo('description'); ?>
      </a></h1>
  </div>
  <!--/logo -->
  <div class="rss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss.png" alt="rss" width="110" height="55" border="0" /></a> </div>
  <div class="topnav">
    <ul>
      <li class="<?php if (is_home()) { echo "current_page_item"; } ?>"><a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?>">Home</a></li>
      <?php wp_list_pages('title_li='); ?>
    </ul>
    <div class="clr"></div>
  </div>
  <!--/topnav -->
<div class="gallery">
  <div id="slider">
    <ul>
      <li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/simple_img_1.jpg" alt="screen 1" width="604" height="342" border="0"  /></a></li>
      <li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/simple_img_2.jpg" alt="screen 2" width="604" height="342" border="0"  /></a></li>
      <li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/simple_img_3.jpg" alt="screen 3" width="604" height="342" border="0"  /></a></li>
    </ul>
  </div>
</div>
<div class="clr"></div>
<!--/slider -->

  <div class="clr"></div>
  <div id="nav1">
    <ul class="sf-menu sf-js-enabled">
      <?php wp_list_categories('title_li='); ?>
    </ul>
    <div class="clr"></div>
  </div>
  <div  class="clr"></div>
</div>
<!--/header -->

    My Javascript File:

    (function($) {
	$.fn.jqShuffle = function(options){
		return this.each(function(){
			var $this = $(this), $els = $this.children().css({left:0,top:0}), els = $els.get();
			if (els.length < 2) return; // don't bother
			var opts = $.extend({}, $.fn.jqShuffle.defaults, options);

			// allow shorthand overrides of width, height and timeout
			var cls = this.className;
			var w = parseInt((cls.match(/w:(\d+)/)||[])[1]) || opts.width
			var h = parseInt((cls.match(/h:(\d+)/)||[])[1]) || opts.height;
			if ($this.css('position') == 'static') $this.css('position', 'relative');
			if (w) $this.width(w);
			if (h && h != 'auto') $this.height(h);
			opts.timeout = parseInt((cls.match(/t:(\d+)/)||[])[1]) || opts.timeout;
			$els.each(function(i){$(this).css('z-index', els.length-i);}).css('position','absolute');

            opts.coords = opts.coords || {left:-$this.width(), top:15};
            opts.els = [];
            for (var i=0; i < els.length; i++)
                opts.els.push(els[i]);

			opts.curr = opts.random ? (Math.floor(Math.random() * (els.length-1)))+1 : 1;
			opts.last = 0;
			$els.each(function(i){
				$(this).click(function(){
					$.fn.jqShuffle.go(els, opts);
				});
			});

			if(opts.auto)
				this.cycleTimeout = setTimeout(function(){$.fn.jqShuffle.go(els, opts)}, opts.timeout + (opts.delay||0));
		});
	};

	$.fn.jqShuffle.go = function(els, opts){
		var last = els[opts.last], curr = els[opts.curr];
		$.fn.jqShuffle[opts.fx](last,curr,opts);
		var roll = (opts.curr + 1) == els.length;
		opts.curr = roll ? 0 : opts.curr+1;
		opts.last = roll ? els.length-1 : opts.curr-1;
		if(opts.auto)
			setTimeout(function() { $.fn.jqShuffle.go(els, opts) }, opts.timeout);
	};

	$.fn.jqShuffle.shuffleLite = function(last, curr, opts, cb) {
		var $el = $(last);
		$el.animate(opts.coords, opts.speed, opts.easing, function() {
			opts.els.push(opts.els.shift());
			for (var i=0, len=opts.els.length; i < len; i++)
				$(opts.els[i]).css('z-index', len-i);
			$el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, cb);
		});
	};

	$.fn.jqShuffle.defaults = {
		fx		: 'shuffleLite',
		speed	: 1000,
		auto	: 0,	// true for automated, false for not
		random	: 0,		// true for random, false for sequence
		easing	: null,
		coords	: null,
		width	: 208,
		delay	: 0,     // additional delay (in ms) for first transition (hint: can be negative)
		timeout	: 4000  // ms duration for each slide
	};
})(jQuery);

    CSS Style Sheet

    /*=== Setup ===*/
* { border:0; margin:0 auto; padding:0; outline:none; }
body { background:#f0f0f0 url(images/main_bg.gif) top center repeat-x; font:13px Arial, Verdana, Helvetica, sans-serif; color:#494949; padding:0; margin:0; }
.html_bg { background:url(images/main_bg2.gif) top center repeat-x; }
a { color:#494949; text-decoration:none; }
a:hover { text-decoration:none; }
p.clr, .clr { clear:both; padding:0; margin:0; background:none; }
p.bg, .bg { clear:both; padding:0; margin:10px 0; border-bottom:1px solid #bababa; height:2px; }
input, select, textarea { border:#cfcfcf 1px solid; color:#404040; font-size:12px; padding:3px; font-family:Arial, Verdana, Helvetica, sans-serif; }
li { list-style:none; }
h2 { color:#222222; font-size:1.5em; font-weight:normal; letter-spacing:-1px; margin:0 0 1em; }
h3 { color:#333333; font-size:1.2em; margin:0 0 .8em; }
h4 { font-size:1em; margin:0 0 1em; }
p { line-height:1.5em; padding:0 0 1.3em; }

/*=== Layout ===*/
#page { width:970px; margin:0 auto; padding:0; }
#page img.maain { margin:0; padding:0; }

/*=== Header ===*/
#header { margin:0 auto; padding:0; }
.header_h2 h2 { font:normal 36px Georgia, "Times New Roman", Times, serif; color:#fff; padding:30px 0; margin:0; }

/*- Logo -*/
.logo { width:268px; float:left; margin:0; padding:0; }
.logo h1 { background:url(images/logo.png) top no-repeat; float:left; text-indent:-9999px; width:268px; }
.logo h1 a { display:block; height:117px; }
.logo h1 a:hover { text-decoration:none; }

/*=== Navigation ===*/
/* RSS */
.rss { float:right; width:110px; height:55px; padding:30px 0 0 0; }
.rss img { margin:0 auto; padding:0; }
/* Search form */
#search span { width:259px; display:block; background:#fff; height:22px; margin:0; padding:3px; border:1px solid #dcdcdc; }
#search input#s { float:left; width:213px; padding:4px 10px; margin:0; border:0; background:none; color:#666; font:normal 12px/14px Arial, Helvetica, sans-serif; }
#search .btn { float:left; padding:0; margin:0; border:0; width:auto; }

/*- Nav1 -*/
#nav1 { font:normal 14px Georgia, "Times New Roman", Times, serif; padding:0; }
#nav1 ul { margin:0; padding:0; }
#nav1 ul.sf-menu li { position:relative; float:left; line-height:51px; padding:0 1px 0 0; text-align:left; }
#nav1 ul.sf-menu li a { color:#4d4d4d; margin:0 5px; }
#nav1 ul.sf-menu li a span { background:none; padding:16px 15px; }
#nav1 ul.sf-menu li a:hover { color:#f6f6f6; background:url(images/r_nav.gif) no-repeat right; }
#nav1 ul.sf-menu li a:hover span { color:#f6f6f6; background:url(images/l_nav.gif) no-repeat left; }
#nav1 ul.sf-menu li a.active { color:#f6f6f6; background:url(images/r_nav.gif) no-repeat right; }
#nav1 ul.sf-menu li a.active span { color:#f6f6f6; background:url(images/l_nav.gif) no-repeat left; }
#nav1 ul.sf-menu li ul.children { background:#ececec; border:none; width:160px; padding:0; }
#nav1 ul.sf-menu li ul.children a { color:#373737; width:160px; margin:0; }
#nav1 ul.sf-menu li ul.children a:hover { color:#fff; background:#e9720c; text-decoration:none; }
#nav1 ul.sf-menu li ul.children a:hover span { background:none; }
#nav1 ul.sf-menu li ul.children li { border:0; }
#nav1 ul.sf-menu li ul.children li ul.children { border-left:none; border-right:none; }
#nav1 ul.sf-menu li ul.children { margin:0; }
#nav1 ul.sf-menu li ul.children ul.children { margin:0 0 0 20px; }

/*- Top Nav -*/
.topnav { margin:0 auto; padding:81px 0 0 0; width:500px; float:right; }
.topnav ul { float:right; list-style:none; padding:0; margin:0; }
.topnav li { float:left; padding:0 5px 0 1px; }
.topnav li a { font:normal 14px Arial, Helvetica, sans-serif; color:#c2c1c1; display:block; float:left; padding:10px; text-decoration:none; }
.topnav li a:hover, .topnav li.current_page_item a { color:#1d1d1d; background:#ececec url(images/hover.gif) top repeat-x; border-top:1px solid #fefefe; border-left:1px solid #fefefe; border-right:1px solid #fefefe; padding:9px 9px 10px; }

/*=== All Columns ===*/
#columns { margin:0 auto; padding:45px 0 0 0; width:970px; }

/*=== Center Column ===*/
#centercol { float:left; width:645px; padding:0; }

/*=== Right Column ===*/
#rightcol { float:right; width:310px; padding:0; }
.box { padding:10px 20px; background:#fff; border:1px solid #d8d8d8; margin:0 0 15px 0; }
.small_link { padding:0; margin:0 auto; }
.small_link a { color:#656464; text-decoration:none; }

/*=== Sub Columns ===*/
.subcols { background:url(images/subcols-bgr.gif) repeat-y left; height:1%; }
.col1, .col2 { float:left; width:285px; }
.col2 { float:right; }

/*=== Post ===*/
.post-block { }
.post-margin { margin-left:236px; }
/*- Post Title -*/
.post-title { padding:0; margin:0; }
.post-title h2 { margin:0; padding:0 0 10px 0; font:normal 24px Georgia, "Times New Roman", Times, serif; color:#464646; }
.post-title h2 a { display:inline; padding:0; margin:0; color:#464646; text-decoration:none; }

/*- Post Excerpt -*/
.post-excerpt { padding:0 0 10px 0; display:table; font:normal 13px Georgia, "Times New Roman", Times, serif; color:#808080; margin:0; }
.post-excerpt p { line-height:1.8em; margin:0; }
.post-excerpt span { float:right; padding:5px 15px; background:#2a2a2a; color:#fff; text-align:center; border:1px solid #555; }
.post-excerpt a { color:#98c740; text-decoration:underline; font-weight:bold; }
/*- Post Lists -*/
.post ul, .post ol { margin:0 0 1.5em; }
.post ul li { background:url(images/ico-list.gif) no-repeat 0 6px; margin:0 0 .4em; padding:0 0 0 10px; }
.post ol li { list-style:decimal; list-style-position:inside; margin:0 0 .4em; }

/*- Post Blockquote -*/
.post blockquote { border-left:3px solid #cfcfcf; font-size:13px; font-style:italic; margin:0 0 1.5em; padding:5px 0 0 10px; }

/*- Post Author -*/
.post-author { margin:0 0 1em; }
.author-details { font-size:11px; }
.author-descr { display:table; height:1%; }

/*- Social Links -*/
.social-links { font:normal 13px Georgia, "Times New Roman", Times, serif; color:#ffffff; padding:5px 10px; margin:0 -20px -10px -20px; line-height:1.8em; background:#323232; border:1px solid #656565; }
.social-links a { color:#ff8822; font-weight:normal; text-decoration:none; }
.social-links a:hover { text-decoration:underline; }

/* post-commets */
.post-commets { padding:10px; float:left; background:#323232; border:1px solid #656565; text-align:center; margin:-10px 15px 0 -20px; color:#ff8822; font:normal 12px Georgia, "Times New Roman", Times, serif; }
.post-commets a { font:normal 30px Georgia, "Times New Roman", Times, serif; color:#f6f6f6; text-decoration:none; }

/*- Post Date -*/
.post-date { float:left; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#7f7f7f; }
.post-date a { text-decoration:none; color:#ff8822; font-weight:bold; }
.post-date a:hover { text-decoration:underline; }

/*- Post Comments -*/
.post-comments h2 { padding-top:10px; }
.post-comments .fl { width:80px; }
.post-comments .fr { width:500px; }

/*- Widget Title - */
.wtitle { padding:0; margin:0; }
.wtitle h2 { margin:0; padding:0; font:normal 24px Georgia, "Times New Roman", Times, serif; color:#464646; text-align:left; }
.wtitle h2 span { font:normal 12px Georgia, "Times New Roman", Times, serif; color:#a1a1a1; }

/*=== Styling Boxes ===*/
/*- Box1 -*/
.box { }

/*- Box2 -*/
.box2 { background:#f9f9f9; border:1px solid #cfcfcf; height:1%; margin:0 0 20px; padding:18px; min-height:115px; }
.box2.alt { background:#FFFFFF; }
.comm-name, .comm-date { line-height:20px; }

/*=== Styling Lists ===*/
/*- List1 -*/
.list1 li { background:url(images/ico-list1.gif) no-repeat 0 1.1em; border-bottom:1px solid #e7e7e7; height:1%; padding:.7em 0 .7em 13px; }
.list1 li.last { border:0; }
#rightcol .list1 li a:hover { color:#33707e; }

/*=== Styling Forms ===*/
input.btn { background:none; border:0; margin:0; padding:0; }
select { padding:1px; }

/*- Message -*/
.message div { margin:0 0 18px; }
.message input { padding:9px 15px; width:470px; }
.message textarea { height:114px; overflow:auto; padding:9px 15px; width:470px; font-family:Verdana; }
.message .submit { float:left; }
.message .btn { padding:0; width:128px; height:32px; background:url(images/button.gif); }
.message .notice { color:#a4a4a4; float:right; font-style:italic; padding:10px 0 0; }

/*=== Pics, Thumbs, Ads etc. ===*/
.pic img { display:block; margin:20px auto 5px auto; }
.pic.fl img { }
.pic.fr img { }
.th { display:block; margin:0 0 .5em; }
.th.fl img { margin-right:10px; max-width:50px;}
.ads img, .widget_flickrRSS img { margin:5px 3px; }
.widget_flickrRSS img { border:1px solid #cfcfcf; }
.box .ac img { border:0; margin:0; }

/*=== Footer ===*/
#page_bottom { background:url(images/footer_bg.gif) top repeat-x; }
#footer { color:#fff; text-decoration:none; font:normal 13px Georgia, "Times New Roman", Times, serif; width:970px; margin:0 auto; padding:20px 0 30px 0; }
#footer a { color:#fff; font-weight:bold; }
#footer span { color:#fff; }
#footer .text2 { padding:25px 20px 0 0; float:left; line-height:1.8em; }
#footer .text { padding:25px 20px 0 0; float:right; line-height:1.8em; }

/*=== Misc. ===*/
.fix { clear:both; height:1px; margin:-1px 0 0; overflow:hidden; }
.hl, .hl2 { background:url(images/hl-dot.gif) repeat-x top; clear:both; height:2px; overflow:hidden; width:100%; }
.hl2 { background:none; border-top:1px solid #e7e7e7; height:1px; margin:0 0 .8em; }
.fl { float:left; }
.fr { float:right; }
.ac { text-align:center; }
.ar { text-align:right; }
.noBorder { border:0; }
.font-sm { font-weight:normal; }
.white { color:#FFF; }

/* Slider */
#slider { width:970px; padding:0; margin:50px auto 9px; background:url(images/slider_bg.png) bottom center no-repeat; height:300px }
div#slideshow { float:left; width:100%; padding:0; height:267px; }
.slider-item { width:956px; height:253px; padding:7px; background:#fff; }
.slider_content_inner img { border:none; }
.controls-center { width:970px; margin-left:auto; margin-right:auto; height:32px; }
#slider_controls { float:right; padding:6px 0; position:relative; margin:0; z-index:1000; width:970px; height:20px; }
#slider_controls ul { margin:0 auto; padding:0; width:70px; }
#slider_controls ul li { margin:0; padding:0; list-style:none; }
#slider_controls ul li { float:left; display:block; }
#slider_controls ul li a { width:13px; height:13px; background:url('images/tabs_2.png') no-repeat center center; display:block; float:left; padding:2px; margin:2px !important; margin:1px 1px; outline:none; }
#slider_controls ul li a:focus { outline:none; }
#slider_controls ul li a:hover, #slider_controls ul li a.activeSlide { background:url('images/tabs_1.png') no-repeat center center; }

The topic ‘Help with Java SlideShow and CSS Style Sheet’ is closed to new replies.