Databases
StackOverflow2013
Postsdbo
POAdd description to lightbox image
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd description to lightbox image
    primarykey
    data
    text
    <p>I'm using this lightbox plugin: <a href="http://s.codepen.io/schadeck/pen/gjbqr" rel="nofollow">http://s.codepen.io/schadeck/pen/gjbqr</a></p> <p>I would like to know if there is any way to add a simple description attribute in my current code. </p> <p>What I want to achieve is a description text on the bottom of the image in the lightbox. I've looked for a solution, but nothing seems to apply for the lightbox.js script I'm using.</p> <p>Here is the code:</p> <pre><code>jQuery(document).ready(function($) { // global variables for script var current, size; $('.lightboxTrigger').click(function(e) { // prevent default click event e.preventDefault(); // grab href from clicked element var image_href = $(this).attr("href"); // determine the index of clicked trigger var slideNum = $('.lightboxTrigger').index(this); // find out if #lightbox exists if ($('#lightbox').length &gt; 0) { // #lightbox exists $('#lightbox').fadeIn(300); // #lightbox does not exist - create and insert (runs 1st time only) } else { // create HTML markup for lightbox window var lightbox = '&lt;div id="lightbox"&gt;' + '&lt;p&gt;Clique para fechar&lt;/p&gt;' + '&lt;div id="slideshow"&gt;' + '&lt;ul&gt;&lt;/ul&gt;' + '&lt;div class="nav"&gt;' + '&lt;a href="#prev" class="prev slide-nav"&gt;Anterior&lt;/a&gt;' + '&lt;a href="#next" class="next slide-nav"&gt;Proxima&lt;/a&gt;' + '&lt;/div&gt;' + '&lt;/div&gt;' + '&lt;/div&gt;'; //insert lightbox HTML into page $('body').append(lightbox); // fill lightbox with .lightboxTrigger hrefs in #imageSet $('#imageSet').find('.lightboxTrigger').each(function() { var $href = $(this).attr('href'); $('#slideshow ul').append( '&lt;li&gt;' + '&lt;img src="' + $href + '"&gt;' + '&lt;/li&gt;' ); }); } // setting size based on number of objects in slideshow size = $('#slideshow ul &gt; li').length; // hide all slide, then show the selected slide $('#slideshow ul &gt; li').hide(); $('#slideshow ul &gt; li:eq(' + slideNum + ')').show(); // set current to selected slide current = slideNum; }); //Click anywhere on the page to get rid of lightbox window $('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues $('#lightbox').fadeOut(300); }); // show/hide navigation when hovering over #slideshow $('body').on( { mouseenter: function() { $('.nav').fadeIn(300); }, mouseleave: function() { $('.nav').fadeOut(300); } },'#slideshow'); // navigation prev/next $('body').on('click', '.slide-nav', function(e) { // prevent default click event, and prevent event bubbling to prevent lightbox from closing e.preventDefault(); e.stopPropagation(); var $this = $(this); var dest; // looking for .prev if ($this.hasClass('prev')) { dest = current - 1; if (dest &lt; 0) { dest = size - 1; } } else { // in absence of .prev, assume .next dest = current + 1; if (dest &gt; size - 1) { dest = 0; } } // fadeOut curent slide, FadeIn next/prev slide $('#slideshow ul &gt; li:eq(' + current + ')').fadeOut(750); $('#slideshow ul &gt; li:eq(' + dest + ')').fadeIn(750); // update current slide current = dest; }); }); </code></pre> <p>HTML:</p> <pre><code>&lt;ul id="imageSet"&gt; &lt;li&gt;&lt;a href="" class="lightboxTrigger"&gt;&lt;img src="" title=""&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSimon Adcock
    1. USmah2602
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAdd description to lightbox image
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POAdd description to lightbox image
      1. USJules Martinez
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload