SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    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):

    Code:
    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.
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code javascript:
    $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.
    Code 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
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Open the file wp-content/plugins/nextgen-gallery/nggajax.php and find the following line:
    PHP Code:
    echo nggShowGalleryintval($_GET['galleryid']) ); 
    And paste the following line just below the line:
    PHP Code:
    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.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <?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... ?
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code 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']) );
    		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?
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I tried that exactly, but it does not work.
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any other ideas?? This is so frustrating!
    Independent Web Designer/Developer in Mandeville, LA USA
    1. JoeyReed.com
    2. Crawfish.com
    3. Pralines.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •