jQuery - How can I keep all items from Toggle ON?

Hello all,

I am trying to put the finishing touches on my client’s website. The site was built with Wordpress as its CMS. For the site’s ‘Photos’ page, I used the NextGen Gallery plugin to manage and display the image gallery. We (my programmer) made some modifcations to the plugin so that users could upload images from the frontend of the site. That was no problem.

Then I added a jQuery script that toggles each image’s description text OFF and ON. It looks good on the 1st page of the gallery, but then if you click to page “2” you get taken to a screen that shows all the descriptions toggled ON. I don’t know what’s doing it, but something is causing all of these descriptions to show at once, which is NOT what we want.

Does anyone know how I can fix this? I can’t get back in touch with the programmer, and I have to complete this project immediately :frowning:

Here’s the jQuery script I am using (it’s in no-conflict mode so it plays nicely with the other code libraries in wordpress):

var $j = jQuery.noConflict();

$j(function(){

$j(document).ready(function( ) {
 $j('.answer').hide();
 $j('.pic_details p.description').toggle(
		function() {
	   $j(this).next('.answer').fadeIn();
		 $j(this).addClass('close');
		},
		function() {
		  $j(this).next('.answer').fadeOut();
			$j(this).removeClass('close');
	  }
	); // end toggle
});
});

The URL to the Photos page on our site: http://theyatclub.com/photos/

A side question:::::: Does anyone know how I can make a ‘description text box’ disappear/fadeout when another one gets clicked? Right now you actually have to go back and re-click each one before it toggles OFF, which starts looking terrible after you’ve clicked a few of them.

Since you have used AJAX for the paginations so you need to reload the jQuery script in a callback function. Put the following code at the end of the file that is being called with AJAX.


$j('.answer').hide();
$j('.pic_details p.description').toggle(function() {
	$j(this).next('.answer').fadeIn();
	$j(this).addClass('close');
},
function() {
	$j(this).next('.answer').fadeOut();
	$j(this).removeClass('close');
}
); // end toggle

And to hide all the opened popup divs, just hide all the .answer elements before you show the clicked one.


$j('.answer').hide();
$j('.pic_details p.description').toggle(function() {
	$j('.answer').hide();
	$j(this).next('.answer').fadeIn();
	$j(this).addClass('close');
},
function() {
	$j(this).next('.answer').fadeOut();
	$j(this).removeClass('close');
}
); // end toggle

Hi Raju,

Thank you so much for your help. Using your advice, I was able to fix the secondary issue. However, I can’t seem to get the main issue resolved.

First, I don’t understand exactly where I am supposed to insert the code you gave me. This is a WordPress site with a gallery plugin. Honestly, I don’t know what you mean when you say find the file that is being called with AJAX.

Does that mean I am supposed to open up the plugin’s folder and find some file in there? Or do I just enter that code snippet into the Photos page (CMS) using WordPress’s wysiwyg editor?

Please help!

Open the file wp-content/plugins/nextgen-gallery/nggajax.php and find the following line:


echo nggShowGallery( intval($_GET['galleryid']) );

And paste the following line just below the line:


echo "<script type=\\"text/javascript\\">
$j('.answer').hide();
$j('.pic_details p.description').toggle(function() {
$j('.answer').hide();
$j(this).next('.answer').fadeIn();
$j(this).addClass('close');
},
function() {
$j(this).next('.answer').fadeOut();
$j(this).removeClass('close');
}
); // end toggle
</script>";

I haven’t tested the code myself because I don’t have WP installed with that plugin to test. Try once and see if that works for you.

Hi Rajug,

I tried inputting that code snippet as you recommended, but it still doesn’t seem to work. Below is the full code for the nggajax.php file. Please take a look and see if maybe the code snippet should be placed somewhere else in the page.


<?php
require_once('ngg-config.php');

// check if we have all needed parameter
if ((!isset($_GET['galleryid']) || !is_numeric($_GET['galleryid'])) || (!isset($_GET['p']) || !is_numeric($_GET['p'])) || !isset($_GET['type']))
	die('Insufficient parameters.');

switch ($_GET['type']) {
	case 'gallery':
	
		// get the navigation page
		set_query_var('nggpage', intval($_GET['nggpage']));
		
		// get the current page/post id
		set_query_var('pageid', intval($_GET['p']));
		set_query_var('show', 'gallery');
		$GLOBALS['id'] = intval($_GET['p']);
		
		echo nggShowGallery( intval($_GET['galleryid']) );
		
		break;
	case 'browser':
	
		// which image should be shown ?
		set_query_var('pid', intval($_GET['pid']));
		
		// get the current page/post id
		set_query_var('pageid', intval($_GET['p']));
		$GLOBALS['id'] = intval($_GET['p']);
			
		echo nggShowImageBrowser( intval($_GET['galleryid']) );
		
		break;
	default:
		echo 'Wrong request type specified.';
}

Also, I use Dreamweaver which often shows when code is formatted properly by displaying certain parts of the code in different colors. When I inputted the line you gave me, Dreamweaver showed most of the code on the page turning to one color(green), so maybe there could be a syntax problem… ?


require_once('ngg-config.php');

// check if we have all needed parameter
if ((!isset($_GET['galleryid']) || !is_numeric($_GET['galleryid'])) || (!isset($_GET['p']) || !is_numeric($_GET['p'])) || !isset($_GET['type']))
	die('Insufficient parameters.');

switch ($_GET['type']) {
	case 'gallery':
	
		// get the navigation page
		set_query_var('nggpage', intval($_GET['nggpage']));
		
		// get the current page/post id
		set_query_var('pageid', intval($_GET['p']));
		set_query_var('show', 'gallery');
		$GLOBALS['id'] = intval($_GET['p']);
		
		echo nggShowGallery( intval($_GET['galleryid']) );
		echo "<script type=\\"text/javascript\\">
$j('.answer').hide();
$j('.pic_details p.description').toggle(function() {
$j('.answer').hide();
$j(this).next('.answer').fadeIn();
$j(this).addClass('close');
},
function() {
$j(this).next('.answer').fadeOut();
$j(this).removeClass('close');
}
); // end toggle
</script>"; 
		break;
	case 'browser':
	
		// which image should be shown ?
		set_query_var('pid', intval($_GET['pid']));
		
		// get the current page/post id
		set_query_var('pageid', intval($_GET['p']));
		$GLOBALS['id'] = intval($_GET['p']);
			
		echo nggShowImageBrowser( intval($_GET['galleryid']) );
		
		break;
	default:
		echo 'Wrong request type specified.';
}

Did you try something like above?

Yes I tried that exactly, but it does not work.

Any other ideas?? This is so frustrating!