Good evening,
I am trying to do a masonry gallery like the on on this website: http://bensasso.com/
I have a plugin already developed on this link: http://yourjavascript.com/4620774411/picwall.js
To work the structure is:
<div id="mainGalleryArea" >
<div class="singleImageWrap" data-fullsize="image1" ><img src="image1" /></div>
<div class="singleImageWrap" data-fullsize="image2" ><img src="image2" /></div>
<div class="singleImageWrap" data-fullsize="image3" ><img src="image3" />
Here the css.min:
#galleryNavigation {
float: left;
height: 100%;
border-right: double 5px darkcyan;
}
#galleryNavigation ul {
list-style-type: none;
padding: 0px 0px 0px 20px;
}
#galleryNavigation li {
line-height: 1.5em;
}
#galleryNavigation a {
color: #888;
text-decoration: none;
}
#mainGalleryArea {
float: left;
position: relative;
opacity: 0;
transition-property: opacity;
transition-duration: 1.2s;
transition-delay: .1s;
}
#mainGalleryArea img,
#fullImageArea img {
max-width: 100%;
overflow: hidden;
}
.singleImageWrap {
position: absolute;
transition-property: top, left;
transition-duration: 1s, 1s;
transition-delay: 0s, 0s;
transition-timing-function: ease, ease;
}
#fullImageArea {
position: relative;
}
#fullImage {
position: absolute;
opacity: 0;
transition-property: opacity;
transition-duration: 1.2s;
transition-delay: .1s;
}
#shiftLeft:hover {
background-color: #333;
opacity: .5;
cursor: pointer;
background-image: url("../images/3arrowback.png");
background-repeat: no-repeat;
background-position: center;
transition-property: background-color, opacity;
transition-duration: 1s, 1s;
transition-delay: 0s, 0s;
}
#shiftRight:hover {
background-color: #333;
opacity: .5;
cursor: pointer;
background-image: url("../images/3arrow.png");
background-repeat: no-repeat;
background-position: center;
transition-property: background-color, opacity;
transition-duration: 1s, 1s;
transition-delay: 0s, 0s;
}
If I insert this code on my template, or even in the page content if works fine, but the user wants to use the gallery of WordPress, then, I am using this code on the functions.php to clean the gallery code and insert mine:
<?php
add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
global $post;
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby'])
unset($attr['orderby']);
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ('RAND' == $order) $orderby = 'none';
if (!empty($include)) {
$include = preg_replace('/[^0-9,]+/', '', $include);
$_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
}
if (empty($attachments)) return '';
// Here's your actual output, you may customize it to your need
$output = "<div id=\"mainGalleryArea\" >\n";
// Now you loop through each attachment
foreach ($attachments as $id => $attachment) {
// Fetch the thumbnail (or full image, it's up to you)
// $img = wp_get_attachment_image_src($id, 'medium');
// $img = wp_get_attachment_image_src($id, 'my-custom-image-size');
$img = wp_get_attachment_image_src($id, 'full');
$output .= "<div class=\"singleImageWrap\" data-fullsize=\"{$img[0]}\" >\n";
$output .= "<img src=\"{$img[0]}\" />\n";
$output .= "</div>\n";
}
$output .= "</div>\n";
return $output;} ?>
But when I use it the plugin make a pile of the pictures in the same place, I do not know which kind of conflict is happening here, any help please!
