Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Front-End: Style Gallery Plugin WordPress

Hi There

I would like to implement a Gallery solution that is styled according to the image attached. I have found a gallery plugin "Next Gen Gallery" that could work with this but maybe someone would have better luck either using that plugin or an alternative one? Would need to be a Jquery gallery.

All I need is basically the modified plugin and styling :)

Hope someone out there can help me :)

Answers (2)


John Cotton answers:

Hi James

I don' think it's available as a WordPress plugin, but you could definitely style the [[LINK href=""]]jQuery Galleriffic plugin[[/LINK]] to do that.

I've used it a few times ([[LINK href=""]]here[[/LINK]] and [[LINK href=""]]here[[/LINK]] for examples) and it's very flexible.

Have a look at the [[LINK href=""]]demo on this page[[/LINK]] to see how custom styling works.


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.


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:

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">
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) );
<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" />

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


Fahad Murtaza answers:

Next Gen Gallery can certainly work with a custom template to produce the look you need.

Do you have the HTML template for attached image?

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:

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

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.