next »

[betweenbrain]

Hi All,

I'm trying to find a way to include the image description in the Lightbox or Slimbox pop-up. Does anyone know how to do this?

I'd really appreciate any help!

Thanks,

Matt

PS: Thanks for this wonderful gallery solution. It has become my standard solution. I can't wait to become a Joomgallery Master so that I'll be able to help others with using it.

[ssoaring]

I would like to know how to do this also. I have my galleries all set-up and the missing piece is to have it display a description when you select a picture.

[betweenbrain]

I'm working on solution based on a jQuery lightbox from http://leandrovieira.com/projects/jquery/lightbox/. My approach is to write a custom jQuery expression to insert the description into the lightbox. I'll keep you posted.

[ssoaring]

Seems like you should be able to add the description below the title. I am not very knowledgeable about coding but it seems like it should be very similar to showing the picture title.

[betweenbrain]

For those of you interested in this functionality, I'm coming very close to achieving this. My work so far can be seen at http://axia.entrecerebro.com/image-gallery2/. The first four images have a description that should display in the lightbox.

Now, it really needs some help to get it from 98.67% to 100%.

My solution isn't the best, but it's fairly functional and could {hopefully} inspire a better way of doing this.

Here's what I've done to get this far.

• Added the leandrovieira|http://leandrovieira.com/projects/jquery/lightbox/ jQuery Lightbox plugin to Joomgallery

               - This plugin seems to offer greater flexibility in withstanding this kind of torture.

• Enabled descriptions to be displayed, to the public, from the Joomgallery control panel
• Used jQuery to hide the description in the Category view (still needs to be optimized to avoid the flash of content)
• Modified leandrovieira's lightbox to display the description in the lightbox

Here are the issues that need addressing:

• The code used to hide the description is:

Code:

$(function(){
   $("li:contains('Description')").hide();
});

I had to go this route since there is no <id> or <class> associated with the description. Finding and hiding the code this way isn't exactly eloquent, and is delayed. Maybe someone with more PHP experience could offer some advice as to how add a custom class so that it could be set to {display:none} from the get go.

• The second issue is my lack of greater javaScript knowledge. The descriptions are displayed in the pop-up, but the count I used isn't right.

The code used to select the description is:

Code:

var nextDesc = $("li:contains('Description'):eq(1)").show();

- line 245

There is an issue with

Code:

:eq(1)

There must be a better way to count.

The description is displayed by adding an append statement to the line that displayes the image caption:

Code:

.append(nextDesc);

- line 249


The entire function is:

Code:

function _show_image_data() {
  // Finds Next List Item Containing "Description"
  var nextDesc = $("li:contains('Description'):eq(1)").show();
  $('#lightbox-container-image-data-box').slideDown('fast');
  $('#lightbox-image-details-caption').hide();
    if ( settings.imageArray[settings.activeImage][1] ) {
$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show().append(nextDesc);
}
// If we have a image set, display 'Image X of X'
   if ( settings.imageArray.length > 1 ) {
    $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' +  settings.imageArray.length).show();
}
}

The entire file can be viewed at http://axia.entrecerebro.com/image-gallery2/components/com_joomgallery/assets/js/lightbox2/js/jquery.lightbox-0.5.js


I'm sure many people would be very grateful to get this complete and add this capability to the already awesome Joomgallery solution.

I'll keep working on it, but my Javascript and PHP abilities are at their ends.

Thanks in advance!

~ Matt

[rufuz]

hummm what about simply   :

in includes/joom.javascript.php  around line 280:
this line:

Code:

      $link = $js_imgpath."\" rel=\"lightbox[joomgallery]\" title=\"".$imgtitle;

replace with:

Code:

      $link = $js_imgpath."\" rel=\"lightbox\" title=\"<h1>".$imgtitle."</h1><br />" .$imgdescription;

this seems to work flawlessy and nicely.

bye

ricc.

[betweenbrain]

Hi Ricc,

Thanks. That looks very promising. But, when I change the code as provided, I get a link above the picture. The link contains the description plus

Code:

" class="jg_catelem_photo">  Omnia AXE

Example screenshot.



Any help would be great.

Thanks!

Matt

[rufuz]

uhmm...

I tried with 1.5.2 (the latest).  Do you have any open links (<a href=" etc...)   in the description? It seems an open html or bbcode tag remains open there...

anyway also try that code:

Code:

$link = $js_imgpath."\" rel=\"lightbox[joomgallery]\" title=\"&lt;h1&gt;".$imgtitle."&lt;/h1&gt;&lt;br /&gt;" .$imgdescription;

ah, and be aware that in the previous code I striped out [joomgallery] (i didn't want slideshow (for the duplicate issue) and I forgot to reinsert it).

[betweenbrain]

It works like a charm! Thanks, that's awesome.

For anyone wanting descriptions on in the pop-up, you can use the following jQuery code to hide them from the gallery.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
     jQuery.noConflict();
     jQuery(document).ready(function(){
      jQuery("li:contains('description')").css("display", "none");
     })
</script>

A couple of things to note:

• This is one of many ways to do this and I'm sure there are better ways to do so (i.e.

Code:

.css("margin-left", "-999em"

for accessibility)

• With MooTools instead of jQuery, so you don't need to load a second library
• This code loads jQuery from Google in the hopes of it being cached already
• This uses jQuery noConflict mode so it plays nicely with other libraries
  

Thanks again rufuz!

[rufuz]

Thanks again rufuz!

you're welcome... I guess the problem was caused mainly by the " that confuses the syntax of the tag. Just replace it with &qout;

bye

ricc.

[Rene]

Hi all,

I'm rather new to joom gallery but are very pleased with the component because it is very easy to use.
In relation to this topic I was able to have the description show up in slimbox.
But I can't figure out where and how to exclude the description under the picture in the categorie view.

Can someone explain in what file en where I need to what?

Thanks,
René

[betweenbrain]

Hi Rene,

With Rufuz' method, I don't believe you need to have the descriptions set to display for them to be displayed in the pop-up. Therefore, under Category view, try setting Show Description to No.

Best,

Matt

[marbert]

Thanks again rufuz!

you're welcome... I guess the problem was caused mainly by the " that confuses the syntax of the tag. Just replace it with &qout;

bye

ricc.

sorry, but I not found file "joom.javascript.php" in current version 1.5.6.3

it's very important for me, please help me in this problem (photo's description in Detail View in Slimbox).

[doopz]

Clearly solved, but can not find the specified file that requires the proper editing for v1.5.7.3. Any help would be greatly appreciated!! Thanks!

[marbert]

Clearly solved, but can not find the specified file that requires the proper editing for v1.5.7.3. Any help would be greatly appreciated!! Thanks!

Hi, doopz!

Maybe this will help you, here I found a solution for JG 1.5.7.3:

http://www.forum.en.joomgallery.net/index.php?topic=3387.msg14914#msg14914