Front-End: Style Gallery Plugin WordPress

James Cells comments:

Hey John

Thanks for the reply, unfortunately though there are going to be numerous galleries that are going to need to be built in the backend as this site will probably get updated with many new posts with galleries throughout the month.

John Cotton comments:

<blockquote>unfortunately though there are going to be numerous galleries that are going to need to be built in the backend</blockquote>

?? Sorry, I don't understand...are you saying you can't use Galleriffic because you want to add more pictures? Both the examples I linked to are pure WordPress using either featured images (ie one per post) (the cloud one) or post galleries (the wedding one) to create the output.

By avoiding a standard plugin you can style the HTML/JS/CSS output as you which. Galleriffic is just giving you the front js to handle user interaction, slideshow and display.

JC

James Cells comments:

oh ok maybe i didnt understand properly.. let me have a look again ;)

John Cotton comments:

To give you an idea, this is part of my code for the cloud one - it's ajax based because there are thousands of images in the gallery and clearly, I don't want them all loaded at once!

This is the core of the ajax routine.


// Get the posts you're interested in
$pics = get_posts( $post_args );

$html = '';

foreach( $pics as $pic ) {
// See if there is a featured image
$attachment_id = get_post_thumbnail_id( $pic->ID );
if( $attachment_id ) {
$title = apply_filters( 'the_title' , $pic->post_title );
$full_src = wp_get_attachment_image_src( $attachment_id , 'full' );
$thumb_src = wp_get_attachment_image_src( $attachment_id , array( 90, 90 ) );

// script your html as desired
$html .= sprintf( '<li><a class="thumb" href="%1$s" title="%2$s"><img src="%3$s" alt="%2$s" width="%4$d" height="%5$d" style="width: %4$dpx; height: %5$dpx" /></a></li>', $full_src[0], $title, $thumb_src[0], $thumb_src[1], $thumb_src[2]);
}
}

// send it all back out as JSON to be dealt with by the client JS
echo json_encode( array( 'html' => $html ) );


James Cells comments:

OK awesome

Im implementing the static html code now and testing it. I would need to use the multiple image option per post like you said you did with the wedding site. however my php to do something like that isnt that good :(

Do you think you could let me know how to implement it? Would be greatly appreciated :) :) :)

John Cotton comments:

It's not a lot different from above.

Set Galleriffic up as described on their site and then use something similar to the following to output the attachments:



<?php
global $post;

$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
$attachments = get_posts($args);
?>

<div id="gallery-thumbs">
<ul class="thumbs noscript">
<?php
foreach ( $attachments as $attachment ) {
$title = apply_filters( 'the_title' , $attachment->post_title );
$full_src = wp_get_attachment_image_src( $attachment->ID, array( 380, 380) );
$thumb_src = wp_get_attachment_image_src( $attachment->ID, array( 50, 50) );
?>
<li>
<a class="thumb" href="<?php echo $full_src[0]; ?>" title="<?php echo $title; ?>">
<img src="<?php echo $thumb_src[0]; ?>" alt="<?php echo $title; ?>" width="<?php echo $thumb_src[1]; ?>" height="<?php echo $thumb_src[2]; ?>" style="width: <?php echo $thumb_src[1]; ?>px; height: <?php echo $thumb_src[2]; ?>px" />
</a>
</li>
<?php
}
?>
</ul>
</div>


Clearly you'd need to change the image sizes to reflect your own, but that's really all.

James Cells comments:

No but I can whip it up quickly

Fahad Murtaza comments:

That would be great.

Fahad Murtaza comments:

Basically I want to know how would you be handling the thumbnail slider on right.

James Cells comments:

http://nextgen-gallery.com/templates/galleryview/

This kinda has the idea im going for however im clueless as to how to get it working properly with my layout.

http://clients.blucreative.net/gallery.zip

that's the html :) Let me know if you need anything else? Thanks alot :) :)

Fahad Murtaza comments:

Thanks James, I will get back to you.