it-swarm.com.de

Nextgen Gallery mit Gallerific integrieren

Erstmalige Veröffentlichung im Wordpress-Bereich von Stack Exchange. Hoffentlich kann mir jemand bei einem Problem helfen.

Ich habe Gallerific erfolgreich in das NextGen-Plugin integriert. Das einzige Problem, das ich habe, ist, dass ich einfach nicht herausfinden kann, wie die Bildbeschreibung mit dem Bild gedreht wird. Ich kann die Bildbeschreibung nur unter den Miniaturansichten anzeigen lassen.

Ich bin sicher, dass es etwas Einfaches ist, aber ich habe es so lange angestarrt, dass ich wahrscheinlich das Offensichtliche verpasse.

Jede Hilfe wird sehr geschätzt!

Hier ist mein Code:

Die benutzerdefinierte NextGen-Vorlage:

<?php 


/**
 Template Page for the gallery overview

Follow variables are useable :

$gallery     : Contain all about the gallery
$images      : Contain all images, path, title
$pagination  : Contain the pagination content

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo      $exif['created_timestamp'] ?>**/
?>

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">

<?php
/**
*GALLERIFFIC
*/
?>
<div id="loading"></div>
<div id="slideshow">
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<!-- Thumbnails -->
<?php foreach ($images as $image) : ?>
<li>
<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image- >description ?>" <?php echo $image->thumbcode ?> >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" width="125" height="100"<?php // echo $image->size ?> />
<!-- thumbnail -->
</a>
</li>
<div class="caption">
<div class="image-desc"><?php echo $image->description ?></div>
</div>
<?php endforeach; ?>
</ul>
<!-- Pagination -->
<?php echo $pagination ?>
</div>
<?php endif; ?>

Und hier ist die benutzerdefinierte Wordpress-Seitenvorlage mit dem Gallerific-Javascript:

<?php
/*
Template Name: Photo Gallery 2
*/
get_header();
?>

<div id="container">
<div id="thin-red">

</div><!-- #thin-red -->
<div id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
<div id="slideshow">
<div id="caption">
<div class="image-desc"></div>
</div>
</div>
<div id="thumbs">
</div><!--end container-->
    <script type="text/javascript">
jQuery(document).ready(function($) {
 var gallery = $('#thumbs').galleriffic({
     delay:                     3000, // in milliseconds
     numThumbs:                 8, // The number of thumbnails to show page
     preloadAhead:              40, // Set to -1 to preload all images
     enableTopPager:            false,
     enableBottomPager:         true,
     maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
     imageContainerSel:         '#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
     controlsContainerSel:      '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
     captionContainerSel:       '#caption', // The CSS selector for the element within which the captions should be rendered
     loadingContainerSel:       '', // The CSS selector for the element within which should be shown when an image is loading
     renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
     renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered
     playLinkText:              'Play',
     pauseLinkText:             'Pause',
     prevLinkText:              'Previous',
     nextLinkText:              'Next',
     nextPageLinkText:          'Next &rsaquo;',
     prevPageLinkText:          '&lsaquo; Prev',
     enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
     enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
     autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
     syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
     defaultTransitionDuration: 0, // If using the default transitions, specifies the duration of the transitions
     onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
     onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
     onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
     onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
     onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
     onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
     onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
 });
 });
</script>
<?php get_footer(); ?>
1
Ian

Ich hatte mit dem gleichen Problem zu kämpfen, aber anstatt Nextgen (das meiner Meinung nach weit über Bord geht) zu verwenden, integrierte ich Gallerific als WordPress-Galerie-Shortcode-Ersatz. Es funktioniert sehr gut und ist für den Endbenutzer sehr einfach, da er nur die Bilder zum Beitrag hinzufügen und auf Galerie einfügen klicken muss.

Ich gebe den Code an, den ich als Referenz verwendet habe:

Am Ende habe ich die Beschriftung anstelle der Beschreibung auf den Bildern verwendet.

Das Plugin:

Hinweis: Dies verwendet einen Teil der Logik und des Codes aus Just Tadlocks Cleaner Gallery-Plugin.

add_filter( 'post_gallery', 'galleriffic_gallery', 10, 2 );

function galleriffic_gallery() {
    global $post;

    /* Orderby */
    if ( isset( $attr['orderby'] ) ) :
        $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
        if ( !$attr['orderby'] )
            unset( $attr['orderby'] );
    endif;

    /*
    * Extract default gallery settings
    */
    extract(shortcode_atts(array(
        'order'      => 'ASC',
        'orderby'    => 'menu_order ID',
        'id'         => $post->ID,
        'itemtag'    => 'dl',
        'icontag'    => 'dt',
        'captiontag' => 'dd',
        'columns'    => 3,
        'size'       => 'thumbnail',
    ), $attr));

    /*
    * Make sure $id is an integer
    */
    $id = intval( $id );

    /*
    * Get image attachments
    * If none, return
    */
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    if ( empty( $attachments ) )
        return '';

    /*
    * If is feed, leave the default WP settings
    * We're only worried about on-site presentation
    */
    if ( is_feed() ) {
        $output = "\n";
        foreach ( $attachments as $id => $attachment )
            $output .= wp_get_attachment_link( $id, $size, true ) . "\n";
        return $output;
    }

    $i = 0;

    /*
    * Remove the style output in the middle of the freakin' page.
    * This needs to be added to the header.
    * The width applied through CSS but limits it a bit.
    */

    /*
    * Open the gallery <div>
    */
    $output .= '<div id="gallery-wrap" class="gallery-wrap">'."\n";
    $output .= '<div id="gallery-'.$id.'" class="content gallery gallery-'.$id.'">'."\n";
        $output .= '<div id="loading" class="loader"></div>'."\n";
        $output .= '<div id="slideshow" class="slideshow"></div>'."\n";
        $output .= '<div id="controls" class="controls"></div>'."\n";
        $output .= '<div id="caption" class="embox"></div>'."\n";
    $output .= '</div><!--#gallery-'.$id.'-->'."\n";
    $output .= '<div id="thumbs" class="navigation">'."\n";
    $output .= '<ul class="thumbs noscript">'."\n";
    /*
    * Loop through each attachment
    */
    foreach ( $attachments as $id => $attachment ) :

        /*
        * Get the caption and title
        */
        $caption = wp_specialchars( $attachment->post_excerpt, 1 );
        $title = wp_specialchars( $attachment->post_title, 1 );
        $link = wp_get_attachment_image_src( $id, 'large' );
        $img = wp_get_attachment_image_src( $id, $size );

        /*
        * Open each gallery item
        */
        $output .= "\n\t\t\t\t\t<li class='gallery-item'>";
            $output .= '<a class="thumb" href="' .  wp_get_attachment_url( $id ) . '" title="' . $title . '">';
                $output .= '<img src="' . $img[0] . '" alt="' . $title . '" title="' . $title . '" />';
            $output .= '</a>';



        $output .= "\n\t\t\t\t\t</li>";

    endforeach;

    /*
    * Close gallery and return it
    */

        $output .= '</ul><!--.thumbs-->'."\n";
        $output .= '</div><!--#thumbs-->'."\n";
        $output .= '</div><!--#gallery-wrap-->'."\n";
        $output .= '<div class="cb"></div>'."\n";

    /*
    * Return out very Nice, valid XHTML gallery.
    */
    return $output;

}
?>

Die gallerischen Einstellungen

Hinweis: Wenn Sie Ihre Einstellungen in einer separaten Datei speichern und mit wp_enqueue_script aufrufen, wird Ihre Vorlage übersichtlicher.

jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
      $('div.navigation').css({'width' : '710px', 'float' : 'left'});
           $('div.content').css('display', 'block');

        // Initially set opacity on thumbs and add
        // additional styling for hover effect on thumbs
        var onMouseOutOpacity = 0.67;
       $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
             });


    var gallery = $('#thumbs').galleriffic({
        delay:                  3000,
        numThumbs:              12,
        preloadAhead:           10,
        enableTopPager:         false,
        enableBottomPager:      true,
        imageContainerSel:      '#slideshow',
        controlsContainerSel:   '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:       true,
        renderNavControls:      true,
        playLinkText:           'Play Slideshow',
        pauseLinkText:          'Pause Slideshow',
        prevLinkText:           '&lsaquo;  &lsaquo;  Previous Photo',
        nextLinkText:           'Next Photo  &rsaquo; &rsaquo;' ,
        nextPageLinkText:       'Next &rsaquo;',
        prevPageLinkText:       '&lsaquo; Prev',
        enableHistory:          true,
        autoStart:              false,
        syncTransitions:    true,
        defaultTransitionDuration: 200,
        onSlideChange:          function(prevIndex, nextIndex) {
              // 'this' refers to the gallery, which is an extension of $('#thumbs')
                 this.find('ul.thumbs').children()
                 .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                 .eq(nextIndex).fadeTo('fast', 1.0);
                  },
            onTransitionOut:  function(slide, caption, isSync, callback) {
            slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
           caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
            },
          onTransitionIn: function(slide, caption, isSync) {
          var duration = this.getDefaultTransitionDuration(isSync);
           slide.fadeTo(duration, 1.0);


          },
            onPageTransitionOut: function(callback) {
                   this.fadeTo('fast', 0.0, callback);
                   },
                onPageTransitionIn:  function() {
               this.fadeTo('fast', 1.0);
                },
              onImageAdded:    function(imageData, $li) {
                      $li.opacityrollover({
                      mouseOutOpacity:   onMouseOutOpacity,
                      mouseOverOpacity:  1.0,
                     fadeSpeed:         'fast',
                     exemptionSelector: '.selected'
                       });
                      }
                   });
      function pageload(hash) {
                  // alert("pageload: " + hash);
                 // hash doesn't contain the first # character.
                         if(hash) {
                         $.galleriffic.gotoImage(hash);
                       } else {
                        gallery.gotoIndex(0);
                        }
             }
gallery.find('a.prev').click(function(e) {
                     gallery.previousPage();
                     e.preventDefault();
                   });

            gallery.find('a.next').click(function(e) {
            gallery.nextPage();
           e.preventDefault();
            });
              // Initialize history plugin.
            // The callback is called at once by present location.hash. 
         $.historyInit(pageload, "advanced.html");

});

Ich hatte geplant, dieses Plugin zu veröffentlichen, aber es braucht noch einige Arbeit, um uns für die Massen nutzbar zu machen.

2
Chris_O

Schauen Sie sich das hier an: Verwenden von Galeriffic in der NextGen Gallery-Vorlage .

Der Artikel handelt von:

Schauen wir uns die Möglichkeiten des NextGen Gallerys Template-Systems an und erstellen Sie eine Vorlage für das Nice Galleriffic jQuery-Plugin.

1
cakra

Bitte geben Sie in Zukunft einen Link zu einer Beispielseite an, um die Arbeit aller zu erleichtern. : D

Versuchen Sie, Folgendes zu ändern:

<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image- >description ?>" <?php echo $image->thumbcode ?> >

zu:

<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

Nach dem $image- und vor dem >description ist ein Leerzeichen, das das Problem sein kann. Ich habe das Gefühl, dass die Linie:

<div class="image-desc"><?php echo $image->description ?></div>

... Tut eigentlich gar nichts, und dieser Gallerific nimmt den Bildtitel und verwendet diesen als Überschrift im div mit der ID #caption . Beachten Sie den Kommentar in der Zeile:

 captionContainerSel:       '#caption', // The CSS selector for the element within which the captions should be rendered

Hier steht "wo es gerendert werden soll", nicht "woher es Untertitelinformationen erhält".

Lassen Sie mich wissen, wenn dies nicht der Fall ist, und ich werde einige andere Änderungen vorschlagen.

Prost, -Æ.

0
aendrew