Integrating Galleriffic into WordPress

  • Hey! So I have been trying for a while to integrate Galleriffic with WordPress.

    It seems to work fine on its own HTML file, but as soon as I transfer it to my theme, it stops working. All I see when I preview the page is the loading gif and nothing else ever pops up.

    I’ve read and Googled around for some possible ideas…
    Put the codes in the header before the <?php wp_head(); ?> or put it after… Neither of these tips worked or had any effect.
    I’m pretty new to jQuery, but I understand the basics and installing it is easy. I’ve used it on non-WordPress pages before it was great! I’m more of a designer and less of a hard core “code” person, so layman’s terms work best. ?? Thanks.
    I checked the file extensions and it all seems to be fine. None of the jquery or the coding seems to out of whack. So I’m out of ideas of what could be wrong.

    Can anyone lend a hand?
    Much help appreciated! Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter Cara

    (@everimag)

    I just rechecked the path, which someone had suggested (elsewhere) but that’s all fine. Anyone?

    Thread Starter Cara

    (@everimag)

    Can anyone help? I’m still encountering the same problem as described above. Thanks!!

    I sure hope you get some help figuring this out. I’ve been searching for over a year trying to find successful integration of Galleriffic into WP. I’ll keep an eye on this thread!

    @everimag
    This is no plugin!
    And it looks like there is none.
    So after i came with that site (see link below) from Drupal i had to figure out how to run the nice gallery in wordpress.

    I hope i can help you… at the moment its not the best/perfect integration (like i read in wp-codex). I make “static” pages that’s where i linked to. So, for me at the moment, it’s not possible to make a gallery from WP-Backend!

    for some possible ideas…
    Put the codes in the header before the <?php wp_head(); ?> or put it after… Neither of these tips worked or had any effect.

    I read this to ??

    1st: call jquery in header…
    2nd: place your gallerffic-galery (after < body >)
    3rd: call your gallerffic-scripts at document end (before < /body >)

    e.g. you can see it here: https://thomasmeinke.de/farbe/schwarz-weiss/

    o_o yeah I know my “gallerffic-scripts” are currently not at the documents end… ??

    p.s. sorry for my english… i hope you/everyone knows what i mean.. when not ask ??

    Thread Starter Cara

    (@everimag)

    @misiri
    Do you have any idea how I could call jQuery into the header? Can you show the code that you’re using? Thanks so much for your help!! ??

    Thread Starter Cara

    (@everimag)

    WAIT! I got it! OMG, thank you so much!!! ??
    Actually I sort of followed your directions?

    Ok, well this is what I did…for anyone who might wish to reference this post in the future:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta tags... blah blah blah />
     <title><?php bloginfo('name'); wp_title(); ?></title>

<link rel="stylesheet/pingback stuff...ect. />

<?php wp_enqueue_script("jquery"); ?> **CALL JQUERY**
<?php wp_head(); ?>

<!-- GALLERIFFIC -->
<link rel="stylesheet" href="/css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
	<script type="text/javascript">
		document.write('<style>.noscript { display: none; }</style>');
	</script>
</head>

<body>

**GALLERIFIC GALLERY**

</body>

    Yes, you got it ??
    For faster page-loading put the galleriffic-calls (js) at the end of your file.
    Actually I don’t figure out how to use “wp_enqueue_script”, so that’s why I load the galleriffic-calls IN the standalone gallery-template (right, not the finest art I know ?? ) so they don’t load not everytime when they didn’t have to…

    For reference/archiv (broken down) here is how I did (with the scripts where they have to be ?? :

    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8''>
<meta tags... "blah blah blah">

<title><?php bloginfo('name'); wp_title(); ?></title>

<link rel='stylesheet' href='../wp-content/themes/** THEMENAME **/style.css'>
<link rel='stylesheet' href='../** PATH-TO **/css/galleriffic.css'>

<?php /** Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline */ ?>
<?php wp_enqueue_script("jquery"); ?>
<script src='//code.jquery.com/jquery-latest.pack.js'></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="../** PATH-TO **/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

<?php wp_head(); ?>
</head>
<body>

...

<div id="container" class="one-column">
    <div id="content"

        <article id="post">
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
                <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'page:', '** THEMENAME **' ), 'after' => '</div>' ) ); ?>
                <?php edit_post_link( __( 'Edit', '** THEMENAME **' ), '<span class="edit-link">', '</span>' ); ?>

            <div id="galleriffic" class="content">
                 ** The galleriffic gallery itself **
            </div><!-- /galleriffic -->

        </article><!-- /post -->

    </div><!-- /content-->
</div><!-- /container-->

...

<!-- Galleriffic Srcipts -->
<script src="../** PATH-TO **/js/jquery.galleriffic.js"></script>
<?php /** Optionally include jquery.history.js for history support */ ?>
<!-- <script src="../** PATH-TO **/js/jquery.history.js"></script> -->
<script src="../** PATH-TO **/js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script>
document.write('<style>.noscript { display: none; }</style>');
</script>
<script>
jQuery(document).ready(function($) {
    /** your configuration */
    /**
      * give your website compression or use
      * https://javascriptcompressor.com/
      */
});
</script>

</body>
</html>
    Thread Starter Cara

    (@everimag)

    Hey! Ah yea, I see.

    So I got it to work, but there’s one issue that I still can’t figure out. That’s different from the example.

    If you go to this testing page, you’ll see that the padding, or whatever around the thumbnails isn’t flush to the image on the top or the bottom, unlike the example. So the spacing is weird. I’m not sure why that’s happening or how I can get it back to normal.

    Thanks.

    <li class="selected" style="opacity: 1;">
    <a class="thumb" title="Title #0" href="#leaf" rel="history">

    <br><!-- << for what? -->

    <img alt="Title #0" src="//......../xxx.jpg">

    <br><!-- << for what? -->

    </a>
    <p></p>
</li>

    if your really need space their, make them padding top & bottom. So kick that <br> ??

    I just want to thank you so much for leaving this post up!! I was struggling so much, but now Galleriffic is working great with WordPress!!! THANKS!!

    Karolina_N

    (@karolina_n)

    Hey anyone who might stumble upon this post again..

    I am trying to make my gallerific code work with my theme.

    The issue I got is that I want a second row of larger thumbnails that is infact single posts. They are fetched by their category and that all works fine.

    What I want is when you click the larger thumnail(the post) is that it should link to the actual post content but show up in the gallery. Makes sense?

    Whan I’m done with the theme I want the user (my client) to understand how to get his posts up easily. So I have put all the info from one item, in this case it is a furniture, inside only one post. That means that I have all my pictures for the furniture and all the text inside this post.

    I do however get the first post to show up inside the gallery but that is only when I call the query

    if ( is_page('products')){
   rewind_posts();
   query_posts('cat=3&showposts=1');
   include(TEMPLATEPATH . '/loopproducts.php');//This is where the gallery is
   wp_reset_query(); ?>
}

    But when I do this the gallery doesn’t connect to my post..

    If anyone has even the tinyest pice of edvice I would be forever greatful. ??

    Karolina_N

    (@karolina_n)

    Oh I forgot to tell you….

    I have made a function for each image.

    So in the larger set of thumbnails the code detects the first image inside my post..

    In the gallery-thumbs it detects the four first pictures inside the post. ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Integrating Galleriffic into WordPress’ is closed to new replies.