WordPress.org

Ready to get started?Download WordPress

Forums

JJ NextGen JQuery Carousel
Thick box integration (6 posts)

  1. James
    Member
    Posted 3 years ago #

    On JJ's demo page I saw an example of the carousel with a thickbox integrated but there isn't much for documentation on how to do it.

    Is there anyone out there that has set this up or can point me in the right direction?

    Thanks in advance.

  2. wrongjon
    Member
    Posted 3 years ago #

    Hi

    Install the plugin called "thickbox"

    and hack the JJ carousel plugin file
    jj_ngg_jquery_carousel.php

    Around line 385 Ive set the alttext and title of the link and image to the alttext and description in next gen

    //JJA readded next two lines to ignore the clever alt checking above
    
            $image_alt = trim($image->alttext);
    		$image_alt = "alt=\"" . esc_attr($image_alt) . "\" ";
    
            $image_description = trim($image->description);
    
            if($image_description != '')
    
            {
    
              $image_description = "title=\"" . esc_attr($image_description) . "\" ";
    
            }
    
            else
    
            {
    
              $image_description = '';
    
            }

    Then in line 425 - ish

    ive commented out the old output variable and amended to add the thickbox class and alttext and title etc

    //$output .= "<img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" />";
    
    		//JJA mod below to display  thumb and add thickbox
    
    		$output .= "<a class=\"thickbox\" ". $image_description. "rel=\"featured\" href=\"" . $image->imageURL . "\"><img src=\"" . $image->thumbURL . "\" " . $image_description . $image_alt. $width_d . $height_d . " border=\"0\" /></a>";

    Oh and im using the nextgen thumb in my carousel <img src=\"" . $image->thumbURL

    and linking that to the larger version
    regards
    Jon

  3. annikaC
    Member
    Posted 3 years ago #

    We were trying to do the same thing - if you need just one gallery change this in includes/jj_ngg_jquery_carousel.php, line 191

    if($use_url)
            {
              $output .= "<a class=\"thickbox\" rel=\"lolgallery\" href=\"" . esc_attr($image_alt) . "\">";
            }

    Rename lolgallery to whatever you like.

  4. annikaC
    Member
    Posted 3 years ago #

    Oh yeah, and if you want the thumbnail images instead of resized full images in the carousel change line 213 to this:
    $output .= "<img src=\"" . $image->thumbURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" />";

  5. James
    Member
    Posted 3 years ago #

    Hey thanks for the feedback.

    I was able to get the thick-box to come up just by changing the class in the output.

    None of page lines match up with the ones you suggested.

    Anyhoo... now I am trying to get the description to show up when you hover on the image.

    Any advice?

  6. James
    Member
    Posted 3 years ago #

    Additionally, it doesn't seem to be outputting the link when the alt is a link. Here is the chunk of code I am working on (which starts at line 171)....

    $image = new nggImage($result);
            $image_alt = trim($image->alttext);
    			$image_alt = "\"" . esc_attr($image_alt) . "\" ";
            $image_description = trim($image->description);
    			if($image_description != '')
    
            {
    
              $image_description = "" . esc_attr($image_description) . "";
    
            }
    
            else
    
            {
    
              $image_description = '';
    
            }
            $output .= "\n    <li>";
    
            // check that alt is url with a simple validation
            $use_url = false;
            if($image_alt != '' && (substr($image_alt, 0, 1) == '/' || substr($image_alt, 0, 4) == 'http' || substr($image_alt, 0, 3) == 'ftp'))
            {
              $use_url = true;
            }
            // if alt isn't a url make it the alt text to backwards support nextgen galleries
    
            if($use_url)
            {
              $output .= "<a href=\"" . esc_attr($image_alt) . "\">";
            }
    
            if($image_description != '')
            {
              $image_description = "title=\"" . esc_attr($image_description) . "\" ";
            }
            else
            {
              $image_description = '';
            }
    
            $width_d = '';
            $height_d = '';
            if($width != '' && $height != '')
            {
              $width_d = " width=\"" . $width . "\"";
              $height_d = " height=\"" . $height . "\"";
            }     
    
    		 $output .= "<a class=\"thickbox\" rel=\"%GALLERY_NAME%\" href=\"" . $image->imageURL . "\"><img src=\"" . $image->imageURL . "\" " . $image_description . $width_d . $height_d . " border=\"0\" /></a>";
    
            if($use_url)
            {
              $output .= "</a>";
            }
            $output .="</li>";

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic