Develop Reference

Images not stacking up in Masonry template?

So apparently my images are not stacking up on top of each other. They are all in straight horizontal rows. Not sure what is wrong. I want the images to be stacked up on top of each other in a fitted Pinterest-like/Masonry grid.
Here's the shortcode I use in my index file:
echo do_shortcode('[nggallery id="1"]');
Here's the code found in my Masonry gallery template file:
<?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'] ?>
**/
?>
<script src="/wp-includes/js/jquery/jquery.masonry.min.js" type="text/javascript"> </script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box'
});
});
});
</script>
<style>
.brick {
display: block;
margin: 0px 10px 15px 10px;
float:left;
/* width:250px; */
height: auto;
}
</style>
<script>
jQuery( document ).ready( function( $ ) {
$('#wall').masonry({
// options
itemSelector : '.brick',
isAnimated: true,
animationOptions: {
duration: 500,
easing: 'linear',
queue: false}
});
</script>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
<div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
<div id="wall">
<!-- Thumbnails -->
<?php $i = 0; ?>
<?php foreach ( $images as $image ) : ?>
<div class="brick">
<a class="thickbox" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
<?php if ( $image->hidden ) continue; ?>
<?php if ($gallery->columns > 0): ?>
<?php if ((($i + 1) % $gallery->columns) == 0 ): ?>
<br style="clear: both" />
<?php endif; ?>
<?php endif; ?>
<?php $i++; ?>
<?php endforeach; ?>
<?php echo $pagination ?>
</div>
</div>
<?php endif; ?>
This is what my gallery looks like on the actual page:
http://steppic.com/original/896e07bdf2f759709b9ccc5f9eea9e28.png

You are calling masonry twice with different parameters.
The first, your container is "#container" and your items are ".box":
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box'
});
In the second, your container is "#wall" and your items are ".brick", and you left out "});" at the end of your (document).ready
jQuery( document ).ready( function( $ ) {
$('#wall').masonry({
// options
itemSelector : '.brick',
isAnimated: true,
animationOptions: {
duration: 500,
easing: 'linear',
queue: false}
});
}); //this was missing
Pick the correct container and items and it should work

I'm not completely sure as I don't know if you provided the complete CSS, but maybe it will work if you just remove the margin: 0px 10px 15px 10px; for class brick.
On the masonry example page I just adjusted an example by adding this margin to the class item which corresponds to your class brick, and the result looks similar to your screenshot:
Masonry Example
In addition, it looks like you call masonry twice - one time for .container - $container.masonry({..., and a second time for #wall - $('#wall').masonry({...
You could check if it's working like intended when you remove the margin as suggested and maybe also call masonry only once.
Update: Next adjustment you can try is to remove height: auto; from class brick.
I've adjusted a masonry example by adding height: auto to class item: Masonry with height: auto, as you will notice, there are some issues not present when the setting for height is removed: Masonry without height: auto
For masonry reference: http://masonry.desandro.com/options.html

jQuery hover no longer working after executing script

Here's the setup I have:
http://i.stack.imgur.com/varMV.png
If I click on image B, it will switch image A and image B. If I click image E, it will switch image B and image E, and so on.
However, I want to add hover effects so that whenever I hover over an image, it will darken that image. I have that working already but when I click on (for example) image B, it will switch image B and image A but now image B is already dark and the hover effects will not work on image A anymore.
I'm using Wordpress:
<div id="content" class="site-content" role="main">
<div class="content_wrapper">
<div class="content_featured" style="float:left; "></div>
<?php if ( have_posts() ) : ?>
<?php
$i = 1;
?>
<div class="content_children" style="float:right">
<div class="content_left" style="float:left">
<?php while( have_posts() ) : the_post(); ?>
<?php
static $count = 0;
if( $count == 5 ) { break; }
else {
if( $i == 1 ) {
?><span><span class="main active"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full');?></div></span></span><?php
} else {
?><span class="child nonactive"><div style="background:black; margin:2px;"><?php the_post_thumbnail('full'); ?></div></span><?php
}
$i++;
$count++;
}
?>
<?php endwhile; ?>
</div>
<div class="content_right" style="float:right;"></div>
</div>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div>
</div><!-- #content -->
Here's the script so far:
jQuery(document).ready(function() {
divide_content($);
cycle_images($);
darken_images($);
var main = jQuery(".content_left span:first").html();
jQuery(".content_left span:first").empty();
jQuery(".content_featured").append(main);
});
function cycle_images($) {
$(".nonactive").click(function() {
var a = $(this).html();
var b = $(".active").html();
//alert(a+"\n\n"+b);
$(this).empty();
$(".active").empty();
$(this).append(b);
$(".active").append(a);
});
}
function divide_content($) {
var size = $(".content_left > span").size();
$(".content_left > span").each(function(index) {
if(index >= size / 2) {
$(this).appendTo(".content_right");
}
});
}
function darken_images($) {
$(".nonactive img").hover(function() {
$(this).fadeTo(500, 0.5);
}, function() {
$(this).fadeTo(500, 1);
});
$(".content_featured").hover(function() {
$(".active img").fadeTo(500, 0.5);
//alert("qwe");
}, function() {
$(".active img").fadeTo(500, 1);
});
}
PS I know this is the wrong title but I don't know how else to state it.
EDIT:
Here's the best I could do with fiddle. Link

Slide to left ul li via JavaScript

I have this structure:
<div style="background-color:#FFF;height:49px;border-top:1px solid #ef4723;clear:both">
<div id="marka-slider" class="row">
<ul>
<?php if (($references = Reference::getAll())) :
foreach ($references as $r) :
?>
<li>
<img src="<?php echo Reference::getUploadPath() . '/' . $r->mediapath; ?>"
alt="<?php echo $r->title; ?>" title="<?php echo $r->title; ?>"/>
<!-- <?php CVarDumper::dump(array('ref: ' => $r->attributes), 5, 1); ?> -->
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div>
JS:
var slider;
$(document).ready(function () {
slider = $('#marka-slider ul li');
setTimeout(function() {
bgscroll('right');
}, 1000);
});
function bgscroll(direction) {
var sign;
if (direction === 'left') {
slider.stop().animate({'background-position': '+=10000'}, 200000, 'linear', bgscroll);
} else {
slider.stop().animate({'background-position': '-=10000'}, 200000, 'linear', bgscroll);
}
But it isn't working. When I check via Firebug, it doesn't give a error. How can I solve it?
DEMO

http://jsfiddle.net/xpVRT/2/
You were animating background image of the li tag, while the images were inside li in the img tags.

Add Swipe Event to my WP jQuery // Slide Show?

I'm wondering how I can add the jQuery / Mobile Swipe event to my Wordpress Slide Show:
I'd like to be able to 'Swipe' through my slides with this using at Mobile.
Slide Show Code // Mark-Up with WP's PHP:
<!-- Top of Page Slider FRAGILE -->
<div id="photo-rotatorWrapper">
<div id="photosubwrap" style="min-height: 280px; max-height: 280px;">
<div id="photo-rotator" style="">
<?php $slide_id=1; ?>
<?php
$featuredPosts = new WP_Query();
$featuredPosts->query("showposts=3");
while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
?>
<div id="slide-<?php echo $slide_id; $slide_id++;?>">
<a href="<?php the_permalink() ?>" class="post-image">
<?php the_post_thumbnail( 'rotator-post-image' ); ?>
<span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span>
</a>
</div>
<?php endwhile; ?><!--/close loop-->
<ul id="slide-nav">
<?php $nav_id=1; ?>
<?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
<li>
<a href="#slide-<?php echo $nav_id; ?>">
<span class="thumbnail" style="display:none;">
</span>
<p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p>
<div style="">
<!--<?php the_excerpt(); ?>-->
<?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?>
<div class="">
<p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p>
</div>
<?php } //else { print"<div>"; } ?>
</div>
</a>
</li>
<?php endwhile; ?><!--/close loop-->
</ul>
</div>
</div>
</div>
<!-- End Top page Slider FRAGILE -->
Script allowing the Slide Show:
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000);
});
</script>
Update: I've just tried:
<script>
$("#slide-1").swiperight(function() {
$.mobile.changePage("#slide-2");
});
</script>
With no such luck ~
ANY SUGGESTIONS - ?

To expand on my comment, here is how to programatically change a tab with jQuery UI's tab widget:
//cache all the tabs (I called them slides...)
//get the number of tabs
var $slides = $('div[id^="slide"]')
slideCount = $slides.length;
//bind the event handlers necessary
$slides.bind('swipeleft', function () {
//this is to go to the next index
//get current slide index and figure out the next one
var currentIndex = $(this).index();
if ((currentIndex + 1) < slideCount) {
currentIndex++;
} else {
//the end was reached, so go back to the first tab
currentIndex = 0;
}
//now select the new tab
$("#photo-rotator").tabs( "select" , currentIndex);
}).bind('swiperight', function () {
//this is to go to the previous index
//get current slide index and figure out the previous one
var currentIndex = $(this).index();
if ((currentIndex - 1) >= 0) {
currentIndex--;
} else {
//the beginning was reached, so go to the last tab
currentIndex = slideCount;
}
//now select the new tab
$("#photo-rotator").tabs( "select" , currentIndex);
});

Problem changing background image using Javascript

I'm trying to change the background image of a link when it is clicked via Javascript. I five tabs and when the user clicks on a tab, I want the background image of that tab to change to a plain white image. Where as the other four tabs should be changed to a grey image.
So my CSS is as follows:
.listingindex li a {
background:url(../images/tabe-nomal.jpg) left top no-repeat;
color:#333333;
display: inline-block;
text-decoration:none;
width:229px;
padding:14px 0px 14px 10px;
}
.listingindex li a:hover {
background:url(../images/tabe-over.jpg) left top no-repeat;
}
and my code looks like this:
<div class="listingindex">
<?php
$catId = get_cat_id('featured');
$childOf = 'child_of='.$catId;
$subCats = get_categories($childOf);
// Slice array so only 5 categories can be displayed.
$subCats = array_slice($subCats, 0, 5);
foreach ($subCats as $value) {
$subCatsStr .= $value->cat_ID.'|';
}
foreach ($subCats as $subCat) {
?>
<ul>
<li><a id="tab_<?=$subCat->cat_ID?>" href="javascript:toggle(<?=$subCat->cat_ID?>,'<?=$subCatsStr?>')"><?=$subCat->name?></a></li>
</ul>
<ul id="thumbnails_<?=$subCat->cat_ID?>" class="listingarea">
<?php $query = new WP_Query('category_name='.$subCat->name.'&posts_per_page=9');
while( $query->have_posts() ) : $query->the_post();?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?
$id = $post->ID;
$filename = $_SERVER["DOCUMENT_ROOT"].'/xxxxxxx/xxxxxx/xxxxx/xxxxxx/images/thumbnails/image_'.$id.'.jpg';
if (file_exists($filename)) {
?><img src="<?php echo $templateDir; ?>/images/thumbnails/image_<?=$id;?>.jpg" alt="Image_<?=$id;?>" /><?
}else{
?><img src="<?php echo $templateDir; ?>/images/thumbnails/no_image.jpg" alt="No Image" /><?
}?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?}?>
</div>
Lastly my JS looks like this:
function toggle(catID, subCatsStr) {
document.getElementById('thumbnails_'+catID).style.display = "block";
document.getElementById('tab_'+catID).style.backgroundImage = "url(/images/tabe-over.jpg)";
subCatsArr = subCatsStr.split('|');
for (i = 0; i <= subCatsArr.length - 2; i++){
if (subCatsArr[i] != catID){
document.getElementById('thumbnails_'+subCatsArr[i]).style.display = "none";
document.getElementById('tab_'+catID).style.backgroundImage = "url(images/tabe-nomal.jpg) left top no-repeat";
}
}
}
At the moment, this code simply removes the grey image (tabe-nomal.jpg) when a tab is clicked.
Any help appreciated.
Regards...

Looks like your backgroundImage urls might not be correct -- try using the same path (../images/..) as in your initial css rule

To solve the problem in the end I had to specify the full path name:
document.getElementById('tab_'+catID).style.backgroundImage = "url(http://www.xxxxxx.ie/xxxxxxx/wp-content/themes/xxxxxxx/images/tabe-over.jpg)";
Not sure why, but this solved the problem. Its a Wordpress theme so maybe this had something to do with it.