Databases
StackOverflow2013
Postsdbo
POGallery Next/prev specific to div content
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGallery Next/prev specific to div content
    primarykey
    data
    text
    <p>I'm a complete noob to JQUERY, learning things slowly. But I have been downloaded an existing <a href="http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/" rel="nofollow">jquery fullscreen gallery</a>, although it works great for a single div , if I wanted to have several divs with different thumbs, the gallery breaks (next/prev tracks all items in all divs called "content").</p> <p>Here is the jquery code:</p> <pre><code>// SLIDE PANEL GALLERY $(function() { /* this is the index of the last clicked picture */ var current = -1; /* number of pictures */ var totalpictures = $('.content img').size(); /* speed to animate the panel and the thumbs wrapper */ var speed = 500; /* show the content */ $('.content').show(); /* when the user resizes the browser window, the size of the picture being viewed is recalculated; */ $(window).bind('resize', function() { var $picture = $('#wrapper').find('img'); resize($picture); }); /* when hovering a thumb, animate it's opacity for a cool effect; when clicking on it, we load the corresponding large image; the source of the large image is stored as the "alt" attribute of the thumb image */ $('.content &gt; img').hover(function () { var $this = $(this); $this.stop().animate({'opacity':'1.0'},200); },function () { var $this = $(this); $this.stop().animate({'opacity':'0.4'},200); }).bind('click',function(){ var $this = $(this); /* shows the loading icon */ $('#loading').show(); $('&lt;img/&gt;').load(function(){ $('#loading').hide(); if($('#wrapper').find('img').length) return; current = $this.index(); var $theImage = $(this); /* After it's loaded we hide the loading icon and resize the image, given the window size; then we append the image to the wrapper */ resize($theImage); $('#wrapper').append($theImage); /* make its opacity animate */ $theImage.fadeIn(800); /* and finally slide up the panel */ $('#panel').animate({'height':'100%'},speed,function(){ /* if the picture has a description, it's stored in the title attribute of the thumb; show it if it's not empty */ var title = $this.attr('title'); if(title != '') $('#description').html(title).show(); else $('#description').empty().hide(); /* if our picture is the first one, don't show the "previous button" for the slideshow navigation; if our picture is the last one, don't show the "next button" for the slideshow navigation */ if(current==0) $('#prev').hide(); else $('#prev').fadeIn(); if(current==parseInt(totalpictures-1)) $('#next').hide(); else $('#next').fadeIn(); /* we set the z-index and height of the thumbs wrapper to 0, because we want to slide it up afterwards, when the user clicks the large image */ $('#thumbsWrapper').css({'z-index':'0','height':'0px'}); }); }).attr('src', $this.attr('alt')); }); /* when hovering a large image, we want to slide up the thumbs wrapper again, and reset the panel (like it was initially); this includes removing the large image element */ $('#wrapper &gt; img').live('click',function(){ $this = $(this); $('#description').empty().hide(); $('#thumbsWrapper').css('z-index','10') .stop() .animate({'height':'100%'},speed,function(){ var $theWrapper = $(this); $('#panel').css('height','0px'); $theWrapper.css('z-index','0'); /* remove the large image element and the navigation buttons */ $this.remove(); $('#prev').hide(); $('#next').hide(); }); }); /* when we are viewing a large image, if we navigate to the right/left we need to know which image is the corresponding neighbour. we know the index of the current picture (current), so we can easily get to the neighbour: */ $('#next').bind('click',function(){ var $this = $(this); var $nextimage = $('.content img:nth-child('+parseInt(current+2)+')'); navigate($nextimage,'right'); }); $('#prev').bind('click',function(){ var $this = $(this); var $previmage = $('.content img:nth-child('+parseInt(current)+')'); navigate($previmage,'left'); }); /* given the next or previous image to show, and the direction, it loads a new image in the panel. */ function navigate($nextimage,dir){ /* if we are at the end/beginning then there's no next/previous */ if(dir=='left' &amp;&amp; current==0) return; if(dir=='right' &amp;&amp; current==parseInt(totalpictures-1)) return; $('#loading').show(); $('&lt;img/&gt;').load(function(){ var $theImage = $(this); $('#loading').hide(); $('#description').empty().fadeOut(); $('#wrapper img').stop().fadeOut(500,function(){ var $this = $(this); $this.remove(); resize($theImage); $('#wrapper').append($theImage.show()); $theImage.stop().fadeIn(800); var title = $nextimage.attr('title'); if(title != ''){ $('#description').html(title).show(); } else $('#description').empty().hide(); if(current==0) $('#prev').hide(); else $('#prev').show(); if(current==parseInt(totalpictures-1)) $('#next').hide(); else $('#next').show(); }); /* increase or decrease the current variable */ if(dir=='right') ++current; else if(dir=='left') --current; }).attr('src', $nextimage.attr('alt')); } /* resizes an image given the window size, considering the margin values */ function resize($image){ var windowH = $(window).height()-150; var windowW = $(window).width()-80; var theImage = new Image(); theImage.src = $image.attr("src"); var imgwidth = theImage.width; var imgheight = theImage.height; if((imgwidth &gt; windowW)||(imgheight &gt; windowH)){ if(imgwidth &gt; imgheight){ var newwidth = windowW; var ratio = imgwidth / windowW; var newheight = imgheight / ratio; theImage.height = newheight; theImage.width= newwidth; if(newheight&gt;windowH){ var newnewheight = windowH; var newratio = newheight/windowH; var newnewwidth =newwidth/newratio; theImage.width = newnewwidth; theImage.height= newnewheight; } } else{ var newheight = windowH; var ratio = imgheight / windowH; var newwidth = imgwidth / ratio; theImage.height = newheight; theImage.width= newwidth; if(newwidth&gt;windowW){ var newnewwidth = windowW; var newratio = newwidth/windowW; var newnewheight =newheight/newratio; theImage.height = newnewheight; theImage.width= newnewwidth; } } } $image.css({'width':theImage.width+'px','height':theImage.height+'px'}); } }); </code></pre> <p>How do I modify the code to allow me to have multiple content divs and the next/prev only correspond to that content div (parent div?) and not to others on the page?</p> <p>If anybody could help, it would be greatly appreciated. Happy to provide the css/html.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USOmar
    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. This table or related slice is empty.
    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