Wordpress + Masonry + Infinite Scroll + Fancybox + php SESSION variables - php

Question

session_start();
$_SESSION["SESSIONaltValue"] = $_POST["galleryValue"];
I'm building a Wordpress site for a client who has a page with heaps of images. I have set up a script to call in all the images in to Masonry, using Infinite Scroll and it works well.
When the user clicks on an image, fancybox launches. I am passing in the ID of the post in to the image and picking it up with jQuery. I've made the ID a variable in jQuery and I'm trying to pass it to php. I've got some script running to POST the variable using ajax. This points to a php page which updates the SESSION. I then echo back the SESSION name in php for testing.
I have set up Wordpress by adding this in to my functions.php file:
// 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 ();
}
It does work, but only once and I can't seem to update the SESSION each time I click an image. Any ideas? Here is the code:
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']; ?> ');
}
});
});
});
});
php script on update-session.php:
session_start();
$_SESSION["SESSIONaltValue"] = $_POST["galleryValue"];
Note: Have just edited the script. Have added in the call to the update-session.php file using on click. Still only getting the same value in SESSION and not updating.

Answer 1

Looks like you're not waiting for your AJAX to complete before opening the lightbox. Here's an updated snippet that should fix your issue (All I did was move the lightbox code into the done handler).
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);
}
});
});
});
});
After submitting I realize this still wouldn't accomplish what you are trying to do. In your PHP that handles the ajax, all you need to do is echo the value you want to load. I've updated the above code to do that.
Here's the updated 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

OK so I have managed to get Masonry working with Infinite scroll on Wordpress, using Fancybox as a plugin to be able to click on the images to make bigger and show some text. The last issue I am having is being able to display the correct data.
Here is what I have in the footer:
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);
}
});
}
});
});
});
});
This now targets a php script depending on next pr previous.
The next script looks like this:
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">
<?php echo $rowMETAS3['name']; ?>
</div>
<?php
}
}
}
?>
</span>
<div class="fancybox-social">
<span><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-Facebook.png" /></span>
<span><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-Twitter.png" /></span>
<span><img src="http://beta.website.com/wp-content/themes/photographersinc/images/glyphIcon-GooglePlus.png" /></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 } ?>
It is a bit of a hack, but does seem to work. It loads in the next text, tags, adds a social media bar, and also displays a before image on top of the main image in fancybox if there is one.
I think it's to do with loading times, any takers?