SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript plugin not working

    I found a great downloadable slider plugin at: Slides, A Slideshow Plugin for jQuery I love the look of this slider and want to incorporate it into our site, but I am a total newbie at coding. I am running the Thesis theme on Wordpress and thought this would be a simple cut and paste, but I've been pulling my hair out over it for about 5 days.

    Here is the code as I have it right now on my site. It works partway in Safari and Opera on Mac, not at all in FF, Chrome or IE anywhere.

    In the header:

    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    	<script src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/js/slides.min.jquery.js"></script>
    
    <script>
    ( function($) {		$(document).ready(function() {
    		$('#slides').slides({
    				preload: true,
    				preloadImage: 'http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/loading.gif',
    				play: 5000,
    				pause: 2500,
    				hoverPause: true
    			});
    		})) ( jQuery );
    </script>
    In the php:

    PHP Code:
    function slides_standard() {
    ?>
    <div id="slides_standard_container">
            <div id="example">
                <img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/coming-soon.png" width="112" height="112" alt="Coming Soon" id="ribbon">
                <div id="slides">
                    <div class="slides_container">
                        <a href="http://www.journalinabox.com/product-testing/" title="Journal in a BoxTM Original Edition" target="_blank"><img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/dont-pick-up.png" width="570" height="270" alt="Slide 1"></a>
                        <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
                    </div>
                    <a href="#" class="prev"><img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                    <a href="#" class="next"><img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
                </div>
                <img src="http:/www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
            </div>
        </div>
    <?php
    }
    add_action('thesis_hook_feature_box''slides_standard');
    In the css:

    Code:
    #feature_box {
        background: none;
        border: none;
    	padding: 0;
    }
    
    #slides_standard_container {
    	width:580px;
    	padding:10px;
    	margin:0 auto;
    	position:relative;
    	z-index:0;
    }
    
    #example {
    	width:600px;
    	height:350px;
    	position:relative;
    }
    
    #ribbon {
    	position:absolute;
    	top:-3px;
    	left:-15px;
    	z-index:500;
    }
    
    #frame {
    	position:absolute;
    	z-index:0;
    	width:739px;
    	height:341px;
    	top:-3px;
    	left:-80px;
    }
    
    /*
    	Slideshow
    */
    
    #slides {
    	position:absolute;
    	top:15px;
    	left:4px;
    	z-index:100;
    }
    
    /*
    	Slides container
    	Important:
    	Set the width of your slides container
    	Set to display none, prevents content flash
    */
    
    .slides_container {
    	width:570px;
    	overflow:hidden;
    	position:relative;
    	display:none;
    }
    
    /*
    	Each slide
    	Important:
    	Set the width of your slides
    	If height not specified height will be set by the slide content
    	Set to display block
    */
    
    .slides_container a {
    	width:570px;
    	height:270px;
    	display:block;
    }
    
    .slides_container a img {
    	display:block;
    }
    
    /*
    	Next/prev buttons
    */
    
    #slides .next,#slides .prev {
    	position:absolute;
    	top:107px;
    	left:-39px;
    	width:24px;
    	height:43px;
    	display:block;
    	z-index:101;
    }
    
    #slides .next {
    	left:585px;
    }
    
    /*
    	Pagination
    */
    
    .pagination {
    	margin:26px auto 0;
    	width:100px;
    }
    
    .pagination li {
    	float:left;
    	margin:0 1px;
    	list-style:none;
    }
    
    .pagination li a {
    	display:block;
    	width:12px;
    	height:0;
    	padding-top:12px;
    	background-image:url(http://www.journalinabox.com/wp-content/themes/thesis_18/thesis_18/custom/images/slides/pagination.png);
    	background-position:0 0;
    	float:left;
    	overflow:hidden;
    }
    
    .pagination li.current a {
    	background-position:0 -12px;
    }
    Any help as to what is going wrong with my code would be greatly appreciated!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    There are a few issues that need to be addressed before you can do anything else, in your <head> tags you added the code for the slider but it has some issues.

    1. The path to the slides.min.jquery.js file doesn't exist, ensure the file exists in the /thesis_18/custom/js/ folder.
    2. The JavaScript has errors in it which are preventing the slider from correctly working overall. See the updated code below which is 100% valid. The only thing i recommend you do however is add the code after the wp_head() declaration and remove the <script> element for the jQuery reference as jQuery automatically gets called by Wordpress.
      HTML Code:
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <script src="<?php bloginfo('template_directory'); ?>/thesis_18/custom/js/slides.min.jquery.js"></script>
      <script>
          $(function() {
              $('#slides').slides({
                  preload: true,
                  preloadImage: '<?php bloginfo('template_directory'); ?>/thesis_18/custom/images/slides/loading.gif',
                  play: 5000,
                  pause: 2500,
                  hoverPause: true
              });
          });
      </script>

    The other thing i want to point out is in your CSS your using a full image path, CSS can use relative paths rather then absolute and they are a lot faster.
    Code CSS:
    background-image:url(images/slides/pagination.png);

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    The path to the slides.min.jquery.js file doesn't exist, ensure the file exists in the /thesis_18/custom/js/ folder.
    The js is in the folder to which I direct in the code, but it is thesis_18/thesis_18/custom/js

    The JavaScript has errors in it which are preventing the slider from correctly working overall. See the updated code below which is 100% valid. The only thing i recommend you do however is add the code after the wp_head() declaration and remove the <script> element for the jQuery reference as jQuery automatically gets called by Wordpress.
    HTML Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/thesis_18/custom/js/slides.min.jquery.js"></script>
    <script>
        $(function() {
            $('#slides').slides({
                preload: true,
                preloadImage: '<?php bloginfo('template_directory'); ?>/thesis_18/custom/images/slides/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });
    </script>
    [/LIST]
    The other thing i want to point out is in your CSS your using a full image path, CSS can use relative paths rather then absolute and they are a lot faster.
    Code CSS:
    background-image:url(images/slides/pagination.png);
    Thank you so much I will make the changes and see how this works!

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    The only thing i recommend you do however is add the code after the wp_head() declaration
    Hmmm. Okay, I made the changes, but still no progress. The Thesis theme has you add header scripts via the interface under Document Head/Additional Scripts, so apparently this is not placing after the wp_head() declaration. I might have to do that manually.

    Also, since making the changes you suggested (and adjusting for the 'other' thesis_18 folder) I am now getting this error message in the console:

    missing } after property list
    [Break On This Error] preloadImage: '<?php blogi...18/custom/images/slides/loading.gif',

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The error is been caused because the code is been parsed as a string and not PHP like it should be, if you manually add the JavaScript after wp_head(), remove the jQuery <script> element and change $ to jQuery then everything should work fine after that given all the paths are correct.

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. Now I just have to figure out how to make those manual changes. :-)

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Simply open the themes header.php file and after <?php wp_head(); ?> add the code in my previous post.

  8. #8
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is what I tried to do, but the Thesis theme does not have that in the header php file. I did a little research in the Thesis forum and it would seem I have to include it as a function in the custom.php file with
    Code:
    add_action('wp_head', 'your_function');
    but that is not working, because it keeps telling me incorrect string, so I'm still trying to work through the exact syntax needed.

    Thanks again for all of your help with this!

    I am not sure if I should drop <script> completely when adding this as a function or not? I am supposed to add
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/thesis_18/custom/js/slides.min.jquery.js"></script>

    to that function as well, correct? Thanks! I'm wish I understood the process more. Trying to add this on a 'crash course' basis!
    Last edited by journalinabox; Jul 6, 2011 at 15:12. Reason: Adding info:

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry for the delay, for the purposes you need you can use the following...

    Code PHP:
    add_action('wp_head', function() {
        return '<script src="' . bloginfo('template_directory') . '/thesis_18/custom/js/slides.min.jquery.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
                $(\'#slides\').slides({
                    preload: true,
                    preloadImage: \'' . bloginfo('template_directory') . '/thesis_18/custom/images/slides/loading.gif\',
                    play: 5000,
                    pause: 2500,
                    hoverPause: true
                });
            });
        </script>';
    });
    Last edited by paul_wilkins; Jul 8, 2011 at 02:33.

  10. #10
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the help. Got it up and running now. :-)

  11. #11
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Good to hear, also just noticed there is a typo in my above example but that doesn't matter now


Bookmarks

Posting Permissions

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