ThemeShaper Forums » Thematic

[closed]

Supersized 3 background slideshow not displaying

(4 posts)
  • Started 3 years ago by ala
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. ala
    Member

    Hey folks,

    I am trying to create a slideshow for the homepage of a website using Slideshow 3, but instead of displaying the images correctly, the background remains white. This happens whether or not I use hooks.

    This code is included in the header:

    <script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/static/js/effects.core.js"></script>
    <script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/static/js/effects.slide.js"></script>
    <script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/static/js/supersized.3.0.js"></script>
    <link rel="stylesheet" type="text/css" src="<?php bloginfo('template_directory'); ?>/static/css/supersized.css" />
    <?php endif; ?>
    <script type="text/javascript" language="javascript">
    	$(document).ready(function() {
    
    		$.fn.supersized.options = {
    			startwidth: 1024,
    			startheight: 768,
    			vertical_center: 1,
    			slideshow: 1,
    			navigation: 0,
    			thumbnail_navigation: 0,
    			transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
    			pause_hover: 0,
    			slide_counter: 0,
    			slide_captions: 0,
    			slide_interval: 7000,
    			slides : [
    				{image : '<?php bloginfo('template_directory'); ?>/static/images/image-one.jpg', title : '', url : ''},
    				{image : '<?php bloginfo('template_directory'); ?>/static/images/image-two.jpg', title : '', url : ''},
    				{image : '<?php bloginfo('template_directory'); ?>/static/images/image-three.jpg', title : '', url : ''}
    			]
    		};
    		$('#supersized').supersized();
    
    		...
    
    		});
    	</script>

    And this is the corresponding css in style.css:

    #supersized {
    	position: fixed;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	opacity: 1;
    	z-index: 0;
    }
    
    #supersized img {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    }

    The site itself can be found at http://new.vmmissions.org if context is helpful.

    Any suggestions?

    Posted 3 years ago #
  2. idk if this is the the solution, but immediately i see that you aren't initializing jquery properly for wordpress. this killed my attempts to use jquery for a long time. all the jquery plugin authors write in the shorthand $ and that just won't fly out of the box w/ WP.

    $(document).ready(function() {

    needs to be changed to

    jQuery(document).ready(function($) {
    Posted 3 years ago #
  3. ala
    Member

    thanks... I made that change, but no dice on the slideshow. As you can probably tell I'm just getting my feet wet here and can use all the help I can get!

    Posted 3 years ago #
  4. hmmmm... i thought it was maybe that your image paths were wrong since template_directory points to thematic and not the child theme, but you aren't even using thematic. you know that means you are sort of in the wrong place. i might be able to look more tomorrow (errr later today) but i am pretty swamped this weekend. i'd suggest removing all the scripts you've added and then putting that one back in. i find all the time it is easier to restart from scratch than to debug. oh and get away from it, fresh eyes help too.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.