ThemeShaper Forums » Thematic

[closed]

Slider images in the header

(11 posts)
  • Started 2 years ago by ninaminu
  • Latest reply from bogh
  • This topic is not resolved
  1. ninaminu
    Member

    Hello There,

    I am planning to use the child theme of powered by of thematic. In the headre area, I want to use slider images by using jquery. Ideally, I do not want to link these images to any page or post. Please let me know if it is possible to do so.

    Thanks and regards,

    Posted 2 years ago #
  2. It is totally possible and isn't that hard at all (provided you just want some sliding images with no other functionality).

    I would suggest starting here -> http://return-true.com/2010/09/getting-jquery-nivo-slider-to-work-inside-your-wordpress-theme/

    An example of a working one (setup through functions.php using hooks).

    /*
    Nivo Slider
    resource: http://return-true.com/2011/02/using-nivo-slider-in-wordpress-with-custom-captions/
    */
    
    // load nivo slider script
    function snix_add_nivo_scripts() {
        wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/functions/nivo/scripts/jquery.nivo.slider.pack.js', 'jquery', '2.5.1');
    }
    add_action('init', 'snix_add_nivo_scripts');
    
    // jquery for slide effects (eventually move to custom)
    function snix_nivo_options() {?>
    
    <script>
    	jQuery(window).load(function() {
    	jQuery('#slider').nivoSlider({
    		effect:'fold', //Specify sets like: 'fold,fade,sliceDown,random'
    		slices:15,
    		animSpeed:500, //Slide transition speed
    		pauseTime:4000,
    		startSlide:0, //Set starting Slide (0 index)
    		directionNav:true, //Next & Prev
    		directionNavHide:true, //Only show on hover
    		controlNav:false, //1,2,3...
    		keyboardNav:true, //Use left & right arrows
    		pauseOnHover:true, //Stop animation while hovering
    		captionOpacity:0.8, //Universal caption opacity
    	});
    });
    
    </script>
    
    <?php }
    add_action('thematic_after','snix_nivo_options');
    
    // set image settings and thumbnail support
    
    add_theme_support('post-thumbnails');
    add_image_size('nivothumb', 960, 200, true);
    
    //display on frontpage
    
    function snix_slider_frontpage() {
    if (is_front_page()) {
    	?>
    <div id="slider-wrapper">
    	<div id="slider">
        <?php
        $captions = array();
        $tmp = $wp_query;
        $wp_query = new WP_Query('posts_per_page=5&category_name=featured');
        if($wp_query->have_posts()) :
            while($wp_query->have_posts()) :
                $wp_query->the_post();
                $captions[] = array('caption' => get_the_title($post->ID), 'link' => get_permalink($post->ID));
                $image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'nivothumb');
        ?>
            <a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" class="attachment-nivothumb wp-post-image" title="#caption<?php echo count($captions)-1; ?>" alt="<?php the_title_attribute(); ?>" /></a>
        <?php
            endwhile;
        endif;
        $wp_query = $tmp;
        ?>
    	</div><!-- close #slider -->
        <?php
        foreach($captions as $key => $caption) :
        ?>
    
            <div id="caption<?php echo $key; ?>" class="nivo-html-caption">
            	<a href="<?php echo $caption['link']; ?>"><?php echo $caption['caption']; ?></a>
        	</div>
    </div>
        <?php
        endforeach;
        }
    }
    add_action('thematic_belowheader','snix_slider_frontpage');

    This snippet runs on anything categorized as "featured", but I think I recall someone made a case that it would better used with a tag instead, which will also work. The above is just a working test example as how to hook it, it actually has more functionality than you are needing, if you just need images, it is much easier.

    If you search the forums more thoroughly, there are suggestions for plugins to use, but I haven't had to use any of them yet, so don't have good input on which plugin would have what you are looking for, even then you would still have to hook it into the header.

    Hope at the least this gives you a starting point.

    Posted 2 years ago #
  3. I use Nivo Slider and it's awesome.

    Posted 2 years ago #
  4. bogh
    Member

    Nivo Gallery can also be added to the thematic, I have just done it :)

    From what I see, the comparison between those two is that Nivo Gallery uses HTML sliders, and the Nivo Slider uses the featured images as sliders.

    Posted 2 years ago #
  5. bogh
    Member

    I will show here how I have done the Nivo Gallery slider for a Thematic Child Theme.
    But there is a JS error, I guess, that is affecting the main menu's js, so if someone can help out with this would be really appreciated.

    1. Download the Nivo Gallery plugin from here: http://nivogallery.dev7studios.com/
    2. Unzip the downloaded file.
    3. Into your Thematic Child Theme create a new folder called 'js'
    4. In the 'js' folder copy "jquery.nivo.gallery.js" (*this can be found in the downloaded folder).
    5. Add tthe following code to functions.php, in your Thematic Child Theme:

    function theme_home_intro() {
    	if ( is_home()) {?>
            <div id="gallery" class="nivoGallery">
                <ul>
                    <li data-type="html" data-title="Lorem ipsum 5" data-caption="dolor sit amet, consectetur adipiscing elit">
                        <h1>Heading</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    </li>
                    <li data-type="video" data-title="Vimeo Video">
                        <iframe src="http://player.vimeo.com/video/29950141?portrait=0&amp;color=ffffff" width="670" height="377" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
                    </li>
                    <li data-type="video" data-title="YouTube Video">
                        <iframe width="560" height="315" src="http://www.youtube.com/embed/72hTSFkYVAo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
                    </li>
                    <li data-type="video" data-title="HTML5 Video">
                        <video width="700" height="390" controls preload="none">
                            <source src="http://mediaelementjs.com/media/echo-hereweare.mp4" type="video/mp4" />
                            <source src="http://mediaelementjs.com/media/echo-hereweare.webm" type="video/webm" />
                            <source src="http://mediaelementjs.com/media/echo-hereweare.ogv" type="video/ogg" />
                        </video>
                    </li>
                </ul>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    	<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.nivo.gallery.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
                $('#gallery').nivoGallery();
            });
            </script>
            </div>
    <?php }
    }
    add_action('thematic_header','theme_home_intro',10);

    I think the error is caused mostly because of the following JS line, because when I remove that one, the JS of the main menu works again.
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    Please let me know if you have any ideas.

    Posted 2 years ago #
  6. Have a look at a bit of code from this link http://forums.themeshaper.com/topic/wp_enqueue_scriptjsfunction it might have an answer to your question.

    Posted 2 years ago #
  7. bogh
    Member

    Thank you. But I've forgot to mention that I don't really know to work with js, so even if I have read all that topic I still don't know how to fix it, or maybe the answer is not in that topic.

    Can someone be more specific with this one please?, I think this gallery could be something interesting for many of the thematic users, but it should work perfectly :D

    I've forgot to mention that you have to add the CSS from "nivo-gallery.css" to your child theme > style.css

    Posted 2 years ago #
  8. bogh
    Member

    I think jQuery noConflict must be added somehow, does anyone know how? I have tried few things with it, but when I added it the slider stops working.
    http://api.jquery.com/jQuery.noConflict/

    Just an idea :)

    Posted 2 years ago #
  9. bogh
    Member

    After struggling a bit I have found the solution, the JS must be added as below:

    function add_js_for_slider() {
    	?>
             <!--[if IE]>
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    	<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.nivo.gallery.js"></script>
    	<script type="text/javascript">
            $(document).ready(function() {
                $('#gallery_slider').nivoGallery();
            });
            </script>
    	<?php
    }
    add_action('init', 'add_js_for_slider');
    Posted 2 years ago #
  10. ack... noooooooooooo!!

    ok, i think you have a problem with:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    b/c thematic already loads jquery so now you are loading it twice! you would not be if you were loading your scripts the correct way using wp_enqueue_script().

    see the codex:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    function kia_enqueue_scripts() {
    
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    
    	if(!is_home()) return;
    
    	wp_enqueue_script('nivo', get_stylesheet_directory_uri() . '/js/jquery.nivo.gallery.js', array('jquery'), true);
    }
    add_action('wp_enqueue_scripts', 'kia_enqueue_scripts');
    
    function kia_initialize_slider(){ ?>
    	<script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#gallery_slider').nivoGallery();
            });
            </script>
    	<?php
    }
    add_action('wp_footer','kia_initialize_slider');

    also see my post on using jquery with thematic (and by extension WP)
    http://forums.themeshaper.com/topic/jquery-in-thematic-demystified
    wonder where the OP went? looks more and more like a "please do it for me" question w/o even bothering for a thank you.

    Posted 2 years ago #
  11. bogh
    Member

    Thank you very much for this update, I just found out that my JS method had issues, but with yours seems to work perfectly :D
    And from what I see now it works even without adding the jquery, so you might want to remove

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );

    I have used #gallery_slider for my own purposes, and forgot to change it here, so please replace it in your post with #gallery, otherwise it will not work for others.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.