session_start();
$_SESSION["SESSIONaltValue"] = $_POST["galleryValue"];
我正在为拥有大量图片页面的客户构建一个Wordpress网站。我已经设置了一个脚本来调用所有图像到Masonry，使用Infinite Scroll并且效果很好。
当用户点击图片时，会启动fancybox。我将帖子的ID传递给图像并使用jQuery将其拾取。我已经将ID变为jQuery中的变量，并且我正在尝试将其传递给php。我有一些脚本运行使用ajax POST变量。这指向更新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中获得相同的值，而不是更新。
答案 0 :(得分：0)
在打开灯箱之前，您似乎没有等待AJAX完成。这是一个应该修复问题的更新代码段（我所做的就是将灯箱代码移到）。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;
答案 1 :(得分：0)
好的，所以我设法让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);
}
});
}
});
});
});
});
现在，这取决于下一个pr之前的PHP脚本。
下一个脚本如下所示：
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中的主图像顶部显示前一个图像（如果有）。 我认为这与加载时间，任何接受者有关吗？