ThemeShaper Forums » Thematic

[closed]

Adding Galleria to thematic_belowheader()

(11 posts)
  • Started 9 years ago by nellyshark
  • Latest reply from nellyshark
  • This topic is resolved
  1. nellyshark
    Member

    Hi folks,

    What I am trying to do is create a a galleria dots gallery on the homepage in thematic_belowheader().

    Im not the best at this so am struggling to figure it out.

    At the moment my code in functions is:

    [code]
    // Make galleria function
    function childtheme_galleria() {

    // We'll show it only on the HOME page IF it's NOT paged
    // (so, not page 2,3,etc.)
    if (is_home() & !is_paged()) { ?>

    <!-- Galleria starts here -->
    <div id="galleria">
    <img src="http://images.apple.com/iphone/home/images/overview_hero1_20100607.png">
    <img src="http://images.apple.com/iphone/home/images/overview_hero2_20100607.png">
    <img src="http://images.apple.com/iphone/home/images/overview_hero3_20100607.png">
    <img src="http://images.apple.com/iphone/home/images/overview_hero4_20100607.png">
    <img src="http://images.apple.com/iphone/home/images/overview_hero5_20100607.png">
    </div>
    <!-- Galleria ends here -->
    <?php }

    } // end of our new function childtheme_galleria

    // Now we add our new function to our Thematic Action Hook
    add_action('thematic_belowheader','childtheme_galleria');

    // Add js scripts
    function my_in_head(){
    if(is_home()){?>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/src/galleria.js"></script>

    <?php }}
    add_action('wp_head', 'my_in_head');

    // Galleria dots
    function galleria_script(){
    if(is_home()){?>
    <script>

    // Load theme
    Galleria.loadTheme('<?php echo get_stylesheet_directory_uri(); ?>/js/src/themes/dots/galleria.dots.js');

    $('#galleria').galleria();

    </script>

    <?php }}
    add_action('thematic_after', 'galleria_script');
    [/code]

    Can anyone help me try get this working, Im not the best with this sort thing tbh

    Posted 9 years ago #
  2. nellyshark
    Member

    Anyone? I installed a galleria plugin which seem to get the jquery sorta correct but messed it up a little.

    Ideally it would be a galleria the same as chromey but with static images

    Posted 9 years ago #
  3. Jamie Mitchell
    Member

    hey nelly

    post a link to the galleria dots gallery you want to use and i will take a look.

    Posted 9 years ago #
  4. nellyshark
    Member

    Hi Jamie,

    Its in the main Galleria download http://galleria.aino.se/.

    An online example of it is
    http://thomashuntington.com/gallery/gallery-pad-landscape.php

    Thanks :D

    Posted 9 years ago #
  5. Jamie Mitchell
    Member

    cool, i'll get back to you in a bit with the code, stay tuned :)

    j

    Posted 9 years ago #
  6. Jamie Mitchell
    Member

    ok mate...

    be sure to create a folder in your child theme for the galleria scripts and make sure the path is right.

    put the below code in your childtheme functions.php (tested and working), you'll need to download a different theme if your not using the classic one.

    <?php
    
    // Filter away the default scripts loaded with Thematic as it is causing conflict with the galleria
    function childtheme_head_scripts() {
        // Abscence makes the heart grow fonder
    }
    add_filter('thematic_head_scripts','childtheme_head_scripts');
    
    function add_script() {?>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/galleria/src/galleria.js"></script><!--make sure this pather is right and pointing to the galleria.js--> 
    
    <?php
    }
    add_action('wp_head', 'add_script');?>
    
    <?php function childtheme_banner() { ?>
    
        <div id="banner">
    		  <div id="banner-container">
    
    	       <div id="galleria">
                <img alt="Squirrel! That is all." src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_edit.jpg/800px-Eichh%C3%B6rnchen_D%C3%BCsseldorf_Hofgarten_edit.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Sea-otter-morro-bay_13.jpg/800px-Sea-otter-morro-bay_13.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Kuznetsk_Alatau_3.jpg/500px-Kuznetsk_Alatau_3.jpg">
                <img alt="Strawberries, yum yum! Shiny red" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Basket_of_strawberries_red_accent.jpg/500px-Basket_of_strawberries_red_accent.jpg">
    
                <img src="http://upload.wikimedia.org/wikipedia/commons/2/2d/Ns1-unsharp.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Laser_effects.jpg/500px-Laser_effects.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PizBernina3.jpg/500px-PizBernina3.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/La_Galera_2.jpg/500px-La_Galera_2.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Costa_rica_santa_elena_skywalk.jpg/500px-Costa_rica_santa_elena_skywalk.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Smoky_forest.jpg/500px-Smoky_forest.jpg">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Alcea_rosea_and_blue_sky.jpg/500px-Alcea_rosea_and_blue_sky.jpg">
            </div>
        </div>
    
        <script type="text/javascript">
        // Load the classic theme
        Galleria.loadTheme('<?php bloginfo('stylesheet_directory'); ?>/galleria/src/themes/classic/galleria.classic.js'); <!--make sure this path points to your theme-->
        // Initialize Galleria
        $('#galleria').galleria();
        </script>
    
    			</div>
        </div>
    
    <?php
    }
    add_action('thematic_belowheader','childtheme_banner'); ?>

    and a little example css for the banner

    #banner{
        width:100%;
        padding:40px 0;
        border-bottom:1px solid #ccc
    }
    #banner-container{
        width:940px;
        margin:0 auto;
    }
    #galleria{
        height:400px;
    }

    have fun...J

    Posted 9 years ago #
  7. Jamie Mitchell
    Member

    ...and i almost forgot, if you only want it on the home page, you will need to add a if_front_page() to the <?php function childtheme_banner() { ?>
    and then end it with <?php } after all the banner stuff, but i'm not sure how to do that, i always get an error.

    somebody else might know how on here.

    J

    Posted 9 years ago #
  8. Thanks for the walk through Jamie, with this and other's replies on jQuery throughout the forum I was finally able to get galleria working and adapt the code for the mb.YTPlayer to work and function. I'll try and find some other jQuery I can play with now that I'm slowly starting to understand

    Only question, should this;
    $('#galleria').galleria();
    be written like this; jQuery('#galleria').galleria(); ?
    unless it's written with this prior;
    jQuery.noConflict();
    jQuery(document).ready(function($){

    This part I'm not 100% on or if I should call the scripts like you do(and it works) or use the wp_enqueue_script to call. Currently I'm using a combination of the two methods for different functions.

    Posted 9 years ago #
  9. Only question, should this;

    $('#galleria').galleria();
    be written like this; jQuery('#galleria').galleria(); ?
    unless it's written with this prior;
    jQuery.noConflict();
    jQuery(document).ready(function($){

    YES. you must use jQuery in wordpress unless you use the noConflict statement in conjunction with the function($). if you only use $('#galleria') it will never work. this was a huge hurdle for me when i started trying to use jquery as the $ shorthand is how all the jquery plugin authors write their sample code.

    and i usually use wp_enqueue_script. both methods work and i suppose not enqueing a script has the advantage of loading it later? i'm not really sure of the advantage of enqueing except neatness and making sure you never load the same script twice.... plus un-enqueing (deregister)

    Posted 9 years ago #
  10. nellyshark
    Member

    Thanks, gonna check this out

    Posted 9 years ago #
  11. nellyshark
    Member

    Thanks folks, although I didnt use Galleria in the end, I used the principals here and it worked. Ta to all :D

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.