Forums

designteam2go

I have no idea whats going on... Im building this on wordpress. heres the code.

<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
?>
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> );</style>
<?php bloginfo('template_directory') ?>

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_enqueue_script('jquery'); ?>

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php //comments_popup_script(); // off by default ?>

<?php wp_head(); ?>

<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/s3slider.js"></script>

<script type="text/javascript">

jquery(document).ready(function() {
jquery('#s3slider').s3slider({
timeOut: 4000
});
});
</script>

</head>

<body <?php body_class(); ?>>



<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href=""><img src="wp-content/themes/default/images/wide/1.jpg" alt="1" /></a>
<span class="top"><strong></strong><br /></span>
</li>

<li class="s3sliderImage">
<a href=""><img src="wp-content/themes/default/images/wide/2.jpg" alt="2" /></a>
<span class="top"><strong>This one is mine</strong><br />Sweet!!!</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

cybershot

did you include the jquery library? did you include it correctly? can you get it working outside of wordpress?

s3slider

To verify functionality - I used Wordpress 2.8 and the theme Arthemia Free v2 (http://michaelhutagalung.com/2008/05/arthemia-magazine-blog-wordpress-theme-released/). I used jquery.js bundled with s3slider.

Put the following lines ONE LINE ABOVE <?php wp_head(); ?> in header.php and verify the script paths:

<script src=\"http://mydomain.com/js/jquery.js\" type=\"text/javascript\"></script>
<script src=\"http://mydomain.com/js/s3Slider.js\" type=\"text/javascript\"></script>

Put the following lines ONE LINE UNDER <?php wp_head(); ?> in header.php :

<script type=\"text/javascript\"> 
    jQuery(document).ready(function() {
        jQuery('#slider1').s3Slider({
            timeOut: 4000 
        });
    });
</script>

Put the following lines at the bottom of the page right above <?php get_footer(); ?> in index.php and verify the img paths:

<div id=\"slider1\">
        <ul id=\"slider1Content\">
            <li class=\"slider1Image\">
                <a href=\"\"><img src=\"images/wide/1.jpg\" alt=\"1\" /></a>
                <span class=\"sliderleft\"><strong>Title text 1</strong><br />Content text...</span></li>
            <li class=\"slider1Image\">
                <a href=\"\"><img src=\"images/wide/2.jpg\" alt=\"2\" /></a>
                <span class=\"sliderright\"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text</span></li>
            <li class=\"slider1Image\">
                <img src=\"images/wide/3.jpg\" alt=\"3\" />
                <span class=\"sliderright\"><strong>Title text 2</strong><br />Content text...</span></li>
            <li class=\"slider1Image\">
                <img src=\"images/wide/4.jpg\" alt=\"4\" />
                <span class=\"sliderleft\"><strong>Title text 2</strong><br />Content text...</span></li>
            <li class=\"slider1Image\">
                <img src=\"images/wide/5.jpg\" alt=\"5\" />
                <span class=\"sliderright\"><strong>Title text 2</strong><br />Content text...</span></li>
            <div class=\"clear slider1Image\"></div>
        </ul>
    </div>

Put the following code at the end of style.css - I changed right to sliderright and left to sliderleft. The <span class> code above has the correct changes too.

<style type=\"text/css\" media=\"screen\">
#slider1 {
    width: 720px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider1Content {
    width: 720px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
	margin-left: 0;
}
.slider1Image {
    float: left;
    position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.sliderclear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.sliderleft {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 280px;
}
.sliderright {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 290px;
}
ul { list-style-type: none;}

cybershot

if you are running a lightbox, that code will interfere with the slider. There is also a better way to include the jquery in wordpress

read this article.

http://digwp.com/2009/06/including-jque ... right-way/

if you are running any other scripts, disable them and see if the slider works. Disable them by removing the script tag in the head section that calls the code that runs them and see if the slider begins to work. If you are running a lightox, then try replacing the lightbox with shadowbox.

http://www.shadowbox-js.com/index.html

it doesn't interfere with the sliders. As far as I know. I have used coda slider and shadow box was the only one that would work.

http://jqueryfordesigners.com/demo/coda-slider.html

s3slider

The purpose of my first posting was to give an example of how to get s3slider to work.

cybershot

what?

treehouse : what would you like to learn today?

Forums

Does anybody know why my wordpress s3slider isn't working?