Wordpress + Masonry + Infinite Scroll + Fancybox + php SESSION 变量

Question

session_start(); 
$_SESSION["SESSIONaltValue"] = $_POST["galleryValue"];

我正在为一个拥有大量图像页面的客户构建一个 Wordpress 网站。我已经设置了一个脚本来调用 Masonry 中的所有图像，使用 Infinite Scroll 并且效果很好。

当用户点击图片时，fancybox 启动。我将帖子的 ID 传递到图像中并使用 jQuery 来获取它。我在 jQuery 中将 ID 设为变量，并尝试将其传递给 php。我已经运行了一些脚本来使用 ajax 发布变量。这指向一个更新SESSION 的php 页面。然后我在 php 中回显 SESSION 名称进行测试。

我已通过将其添加到我的 functions.php 文件中来设置 Wordpress：

// Allow sessions
add_action('init', 'myStartSession', 1);
add_action('wp_logout', 'myEndSession');
add_action('wp_login', 'myEndSession');

function myStartSession() {
    if(!session_id()) {
        session_start();
    }
}

function myEndSession() {
    session_destroy ();
}

它确实有效，但只有一次，而且我似乎无法在每次单击图像时更新 SESSION。有任何想法吗？代码如下：

jQuery:

jQuery(function(){
    var $container = jQuery('#pageRowMasonry');

    $container.imagesLoaded(function(){
        $container.masonry({
        itemSelector: '.pageGalleryContainer',
        columnWidth: 100
        });
    });

    $container.infinitescroll({
    navSelector  : '.page-nav',    // selector for the paged navigation 
    nextSelector : '.page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.pageGalleryContainer',     // selector for all items you'll retrieve
        loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = jQuery( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true ); 
        });

        jQuery(newElements).each(function() {
            // Image hovers
            jQuery(this).on("hover",function(){
                jQuery(this).find('img').toggleClass('pageGalleryContainerImageRollover');
                jQuery(this).find('h3').toggleClass('displayNone');
            });

            jQuery(this).on("click",function(){
                jQuery.ajax({
                type: 'POST',
                url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session.php',
                data: {
                    galleryValue: jQuery(this).find('img').attr("alt")
                    }
                });
            });

            // Fancybox
            jQuery("a.fancybox").fancybox({
                // fancybox API options here
                'padding': 10,
                'titlePosition'  : 'over',
                'titleFromAlt' :  true,
                'onComplete': function(){
                    jQuery('#fancybox-title-over').append(' test ');
                    jQuery('#fancybox-title-over').append(' <?php echo $_SESSION['SESSIONaltValue']; ?> ');
                }
            });

        });

    });
});

update-session.php 上的 php 脚本：

session_start(); 
$_SESSION["SESSIONaltValue"] = $_POST["galleryValue"];

注意：刚刚编辑了脚本。已使用单击添加了对 update-session.php 文件的调用。仍然只能在 SESSION 中获得相同的值并且没有更新。

Answer 1

您似乎没有等待 AJAX 完成后才打开灯箱。这是一个更新的 sn-p 应该可以解决您的问题（我所做的只是将灯箱代码移动到 done 处理程序）。

jQuery(newElements).each(function() {
    // Image hovers
    jQuery(this).on("hover",function(){
        jQuery(this).find('img').toggleClass('pageGalleryContainerImageRollover');
        jQuery(this).find('h3').toggleClass('displayNone');
    });

    jQuery(this).on("click",function(){
        jQuery.ajax({
        type: 'POST',
        url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session.php',
        data: {
            galleryValue: jQuery(this).find('img').attr("alt")
            }
        }).done(function(data){
             // Fancybox
            jQuery("a.fancybox").fancybox({
                // fancybox API options here
                'padding': 10,
                'titlePosition'  : 'over',
                'titleFromAlt' :  true,
                'onComplete': function(){
                    jQuery('#fancybox-title-over').append(' test ');
                    jQuery('#fancybox-title-over').append(data);
                }
            });
        });
    });
});

提交后，我意识到这仍然无法完成您想要做的事情。在处理 ajax 的 PHP 中，您需要做的就是回显要加载的值。我已经更新了上面的代码来做到这一点。

这是更新后的 PHP：

// Maybe you still want to save this in session so its there without AJAX on
// page load so I'll leave this in
session_start(); 
$_SESSION["SESSIONaltValue"] = $_POST["galleryValue"];

// But what you really want to do is just echo it out so your JavaScript can use
// it in the lightbox
echo $_POST["galleryValue"];
exit;

Answer 2

好的，所以我设法让 Masonry 在 Wordpress 上使用 Infinite 滚动，使用 Fancybox 作为插件，以便能够单击图像以放大并显示一些文本。我遇到的最后一个问题是能够显示正确的数据。

这是我在页脚中的内容：

    jQuery(function(){

    var $container = jQuery('#pageRowMasonry');

    $container.imagesLoaded(function(){
        $container.masonry({
        itemSelector: '.pageGalleryContainer',
        columnWidth: 100
        });
    });

    $container.infinitescroll({
    navSelector  : '.page-nav',    // selector for the paged navigation 
    nextSelector : '.page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.pageGalleryContainer',     // selector for all items you'll retrieve
        loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = jQuery( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true ); 
        });

        jQuery(newElements).each(function() {
            // Image hovers
            jQuery(this).on("hover",function(){
                jQuery(this).find('img').toggleClass('pageGalleryContainerImageRollover');
                jQuery(this).find('h3').toggleClass('displayNone');
            });

            jQuery(this).on("click",function(){
                jQuery.ajax({
                type: 'GET',
                url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session.php',
                data: { galleryValue: jQuery(this).find('img').attr("alt") },
                success: function( msg ) {
                    jQuery('#fancybox-title-over').html(msg);
                    }
                });
            });

            // Fancybox
            jQuery("a.fancybox").fancybox({
                // fancybox API options here
                'padding': 10,
                'titlePosition'  : 'over',
                'titleFromAlt' :  true
            });

            jQuery("#fancybox-left").on("click",function(){
                jQuery.ajax({
                type: 'GET',
                url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session-previous.php',
                data: { galleryValue: jQuery('#fancybox-content').find('img').attr("alt") },
                success: function( msgDirection ) {
                    jQuery('#fancybox-title-over').html(msgDirection);
                    }
                });
            });

            jQuery(document).keydown(function(e){
                if (e.keyCode == 37) {
                    jQuery.ajax({
                    type: 'GET',
                    url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session-previous.php',
                    data: { galleryValue: jQuery('#fancybox-content').find('img').attr("alt") },
                    success: function( msgDirection ) {
                        jQuery('#fancybox-title-over').html(msgDirection);
                        }
                    });
                }
            });

            jQuery("#fancybox-right").on("click",function(){
                jQuery.ajax({
                type: 'GET',
                url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session-next.php',
                data: { galleryValue: jQuery('#fancybox-content').find('img').attr("alt") },
                success: function( msgDirection ) {
                    jQuery('#fancybox-title-over').html(msgDirection);
                    }
                });
            });

            jQuery(document).keydown(function(e){
                if (e.keyCode == 39) { 
                    jQuery.ajax({
                    type: 'GET',
                    url: 'http://beta.website.com/wp-content/themes/photographersinc/update-session-next.php',
                    data: { galleryValue: jQuery('#fancybox-content').find('img').attr("alt") },
                    success: function( msgDirection ) {
                        jQuery('#fancybox-title-over').html(msgDirection);
                        }
                    });
                }
            });

        });
    });
});

这现在针对一个 php 脚本，具体取决于下一个 pr 上一个。

下一个脚本如下所示：

session_start();
if ($_GET['galleryValue']):
$ip = $_GET['galleryValue'];
// Connect to DB
define('DB_HOST', 'XXXXXX');
define('DB_USER', 'XXXXXX');
define('DB_PASS', 'XXXXXX');
define('DB_NAME', 'XXXXXX');
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('Could not connect to MySQL DB ') . mysql_error();
$db = mysql_select_db(DB_NAME, $link);

$sql1 = "SELECT * FROM wp_posts WHERE ID = {$ip}";
$query1 = mysql_query($sql1);
$row1 = mysql_fetch_array($query1);

$sql = "SELECT * FROM wp_posts WHERE post_type = 'gallery' AND post_status = 'publish' AND post_title = (SELECT MIN(post_title) FROM wp_posts WHERE post_title > '".$row1['post_title']."')";
$query = mysql_query($sql);
$row = mysql_fetch_array($query);

// Look for before image in WP_postmeta
$sqlIMG1 = "SELECT * FROM wp_postmeta WHERE meta_key = 'gallery_gallery-before-image_thumbnail_id' AND post_id = '".$row['ID']."'";
$queryIMG1 = mysql_query($sqlIMG1);
$rowIMG1 = mysql_fetch_array($queryIMG1);

$sqlIMG2 = "SELECT * FROM wp_postmeta WHERE post_id = '".$rowIMG1['meta_value']."' AND meta_key = '_wp_attached_file'";
$queryIMG2 = mysql_query($sqlIMG2);
$rowIMG2 = mysql_fetch_array($queryIMG2);

if ($rowIMG2['meta_value'] != '') { $beforeImage = $rowIMG2['meta_value']; }
?>
<span class="fancybox-title"><?php echo $row['post_title']; ?></span>
<span class="fancybox-extraText"><strong>Read more about: </strong>
<?php
// Look for edited item in WP_postmeta
$sqlMETAS1 = "SELECT * FROM wp_term_relationships WHERE object_id = '".$row['ID']."'";
$queryMETAS1 = mysql_query($sqlMETAS1);
while ($rowMETAS1 = mysql_fetch_array($queryMETAS1)) {

    $sqlMETAS2 = "SELECT * FROM wp_term_taxonomy WHERE term_taxonomy_id = '".$rowMETAS1['term_taxonomy_id']."'";
    $queryMETAS2 = mysql_query($sqlMETAS2);
    $rowMETAS2 = mysql_fetch_array($queryMETAS2);

    $sqlMETAS3 = "SELECT * FROM wp_terms WHERE term_id = '".$rowMETAS2['term_id']."'";
    $queryMETAS3 = mysql_query($sqlMETAS3);
    $rowMETAS3 = mysql_fetch_array($queryMETAS3);


    if ($rowMETAS3['name'] != 'Gallery') {
    if ($rowMETAS3['name'] != 'Gallery (Double)') { ?>

        <div class="fancyBoxTagList">
            <a href="navigation.php?type=gallery-to-blog&tagged=<?php echo $rowMETAS3['slug']; ?>"><?php echo $rowMETAS3['name']; ?></a>
        </div>

    <?php
    }
    }
}
?>
</span>
<div class="fancybox-social">
<span><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $row['guid']; ?>" target="_blank"><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-Facebook.png" /></a></span>
<span><a href="https://twitter.com/intent/tweet?source=webclient&text=<<?php echo $row['post_title']; ?> by+%23photographersinc <?php echo $row['guid']; ?>" target="_blank"><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-Twitter.png" /></a></span>
<span><a href="https://plus.google.com/share?url=<?php echo $row['guid']; ?>" target="_blank" onclick="javascript:window.open(this.href,"", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;"><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-GooglePlus.png" /></a></span>
<span><a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php echo $row['guid']; ?>" class="pin-it-button pinitBtnOverride" count-layout="horizontal"><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-Pinterest.png" /></a></span>
</div>
<?php if ($beforeImage) { ?>
<script>
jQuery('#fancybox-img').after('<img id="fancybox-img-right" class="fancybox-img-before hidden" src="http://beta.website.com/wp-content/uploads/<?php echo $beforeImage; ?>" style="opacity: 0.1;" />');
setTimeout(function(){
    jQuery(".fancybox-img-before").removeClass("hidden");
    jQuery(".fancybox-img-before").animate({opacity:'1.0'});
    },500)
</script>
<?php } ?>

这有点小技巧，但似乎确实有效。它加载下一个文本，标签，添加一个社交媒体栏，如果有的话，还会在fancybox的主图像顶部显示一个前图像。 我认为这与加载时间有关，任何接受者？