jQuery slide with images from NextGen Gallery WordPress
- SOLVED
Hi,
I'm using NextGen gallery to import image galleries and attach them to the specific posts.
Here is an example of the page: http://www.aspbluesquare.be/referenties/bedrijfsevenementen/bedrijfsevenement-1/
What I would like to achieve is to show the images into the big black LED TV with the existing jQuery plugin.
So what should be done:
1. check the nextgen gallery that has been attached to the specific post
2. Extract the ID of the nextgen gallery
3. Extract the image paths of the nextgen ID and list them like <img src="path"> underneath each other.
is there someone who can help me with this?
Kind regards,
Filip Van Reeth
Answers (5)
John Cotton answers:
I'm not sure that this is what you want, but changing your slideshow script to this will add all the images at the bottom to the slide show in the TV (it will leave the images at the bottom and in the other fader too):
<script type="text/javascript" language="javascript">
jQuery(document).ready( function() {
jQuery(".ngg-gallery-thumbnail img").each( function() {
jQuery(".slideshow").append(jQuery(this));
});
jQuery(".slideshow").cycle({
fx: 'scrollLeft',
timeout: 4000,
pager: '#paging',
fastOnEvent: true
});
});
</script>
Filip Van Reeth comments:
Hi,
Take a look at http://www.aspbluesquare.be/referenties/bedrijfsevenementen/bedrijfsevenement-1/
It shows all the images and in lowRes (thumbnail version).
It should show the highRes (the ones when you click on the thumbnail images).
Can you fix this. Otherwise it's really nice.
Filip Van Reeth comments:
It also duplicates the images.
There are ten images but he repeats them 5 times.
Hope you get it fixed ;-)
John Cotton comments:
Filip
The duplication is because you've left the old slideshow cycle code in there too. That needs to come out.
On the hi-res versions, I'll put the code up in a moment.
John
John Cotton comments:
For the hi-res ones, try this:
<script type="text/javascript" language="javascript">
jQuery(document).ready( function() {
jQuery(".ngg-gallery-thumbnail a").each( function() {
jQuery(".slideshow").append("<img src='"+jQuery(this).attr("href")+"' />");
});
jQuery(".slideshow").cycle({
fx: 'scrollLeft',
timeout: 4000,
pager: '#paging',
fastOnEvent: true
});
});
</script>
...and remember to remove the original slideshow code...
Filip Van Reeth comments:
Hmm,
Wonder what i'm doing wrong.
See my code below:
<div class="slideshow">
<div class="slide-part">
<script type="text/javascript" language="javascript">
jQuery(document).ready( function() {
jQuery(".ngg-gallery-thumbnail a").each( function() {
jQuery(".slideshow").append("<img src='"+jQuery(this).attr("href")+"' />");
});
jQuery(".slideshow").cycle({
fx: 'scrollLeft',
timeout: 4000,
pager: '#paging',
fastOnEvent: true
});
});
</script>
</div>
</div>
Filip Van Reeth comments:
Works, i removed the first slideshow out of the content.
Still one problem.
The first image 'number 1' is empty.
How can we fix this?
John Cotton comments:
The extra one is this code:
<div class="slide-part">
<script type="text/javascript" language="javascript">
jQuery(document).ready( function() {
jQuery(".ngg-gallery-thumbnail a").each( function() {
jQuery(".slideshow").append("<img src='"+jQuery(this).attr("href")+"' />");
});
jQuery(".slideshow").cycle({
fx: 'scrollLeft',
timeout: 4000,
pager: '#paging',
fastOnEvent: true
});
});
</script>
</div>
This needs to be <em>placed outside of the slideshow div</em> - just after it would be fine.
Also - it would be better to have the cycle.js file loaded from your own server, not github link.
JC
juan manuel incaurgarat answers:
ill do it, no problem
i need ftp access to your site, and wordpress admin as well
please email it to [email protected]
ive worked with NextGen gallery several times before
EDIT: youll get it done today. at least ill do it in one sitting. i can start in less than an hour and then im free to work as many hours as it might take
juan :)
Filip Van Reeth comments:
how quick can you get the job done?
sreejith cm answers:
Hi,
I guess it the images in the end you are reffering to.
You can get the nextgen gallery like this:
jQuery('#ngg-gallery-1-460')
Filip Van Reeth comments:
how do you mean?
sreejith cm comments:
Sorry has added the beginning alone. I will get the complete code a little later.
Filip Van Reeth comments:
super, looking forward to it
Pali Madra answers:
Hi! I can get this done by the end of the tomorrow morning (PST). Let me know if interested.
Sébastien | French WordpressDesigner answers:
Hi
1. if there is a shortcode for a gallery in your page, you must display your post without the shortcode :
<?php
global $post;
$contenu=$post->post_content;
$titre=$post->post_title;
$avant = explode('[',$contenu );
$apres = explode(']',$contenu );
$inshortcode = eregi("\[(.*)\]",$contenu,$sortie);
?>
<? if(!empty ($sortie[1])) { /////////////if there is a shortcode for a gallery ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $structure = '<h2>'.$titre.'</h2><div id="post">'.$avant[0]. $apres[1].'</div>';
$struc = apply_filters('the_content',$structure);
echo $struc;
?>
2. you must check the shortcode and display the slideshow (in a loop)
<?php $slideshow = '['.$sortie[1].']';
$slideshow = apply_filters('the_content',$slideshow);
echo $slideshow;
With that you can display the slideshow you want, but tell me if you need more help
Filip Van Reeth comments:
Does not seem to work ;-(
Can you get on the road with John Cotton (see above).
He is on the right track. Thx
Sébastien | French WordpressDesigner comments:
Have you right insert a shorcode in your post ?
Yes ? So, copy and paste this code in page.php
You must use this code to display your post :
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<div id="content" class="narrowcolumn" role="main">
<?php
global $post;
$contenu=$post->post_content;
$titre=$post->post_title;
$avant = explode('[',$contenu );
$apres = explode(']',$contenu );
$inshortcode = eregi("\[(.*)\]",$contenu,$sortie);
?>
<? if(!empty ($sortie[1])) { /////////////if there is a shortcode for a gallery ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$slideshow = '['.$sortie[1].']';
$slideshow = apply_filters('the_content',$slideshow);
echo $slideshow;
?>
<?php $structure = '<h2>'.$titre.'</h2><div id="post">'.$avant[0]. $apres[1].'</div>';
$struc = apply_filters('the_content',$structure);
echo $struc;
?>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link(__('« Older Entries', 'kubrick')) ?></div>
<div class="alignright"><?php previous_posts_link(__('Newer Entries »', 'kubrick')) ?></div>
</div>
<?php else : ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Sébastien | French WordpressDesigner comments:
of course, you must customize the code to display the slideshow like the other. But this is the response to your question. This code return the list of images and separe slide and post :-)
if you want i can customize your page.php