StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POChanging fullscreen gallery navigation to bullet-navigation
primarykey
Id
5707551
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2011-04-18T19:00:31.670
FavoriteCount
1
LastActivityDate
2015-08-09T22:26:27.843
LastEditDate
2015-08-09T22:26:27.843
LastEditorUserId
4521040
OwnerUserId
709953
ParentId
0
PostTypeId
1
Score
3
ViewCount
3852
LastEditorDisplayName
text
Body
<p>I'm a noob at modifying jQuery and have managed to do the odd simple piece of code, but its a bigger task for me to modify this gallery: <a href="http://buildinternet.com/project/supersized/" rel="nofollow">http://buildinternet.com/project/supersized/</a> - which currently uses a next/prev button and a digit counter e.g. 1/3, 2/3 etc...</p> <p>I need to simply change the digit counter to bullet counters as found on sliders like <a href="http://wowslider.com/" rel="nofollow">http://wowslider.com/</a>.</p> <p>I tinkered with the jquery and tried a few things, but the changes could be much more than I anticipated. Any hints or tips to get me going?</p> <p>Here is the actual JS:</p> <pre><code>(function($){ //Add in Supersized elements $(document).ready(function() { $('body').prepend('<div id="supersized-loader"></div>').prepend('<div id="supersized"></div>'); }); //Resize image on ready or resize $.supersized = function( options ) { //Default settings var settings = { //Functionality slideshow : 1, //Slideshow on/off autoplay : 1, //Slideshow starts playing automatically start_slide : 1, //Start slide (0 is random) slide_interval : 5000, //Length between transitions transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 750, //Speed of transition new_window : 1, //Image links open in new window/tab pause_hover : 0, //Pause slideshow on hover keyboard_nav : 1, //Keyboard navigation on/off performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) image_protect : 1, //Disables image dragging and right click with Javascript image_path : 'img/', //Default image path //Size & Position min_width : 0, //Min width allowed (in pixels) min_height : 0, //Min height allowed (in pixels) vertical_center : 1, //Vertically center background horizontal_center : 1, //Horizontally center background fit_portrait : 0, //Portrait images will not exceed browser height fit_landscape : 0, //Landscape images will not exceed browser width //Components navigation : 1, //Slideshow controls on/off thumbnail_navigation : 0, //Thumbnail navigation slide_counter : 1, //Display slide numbers slide_captions : 1 //Slide caption (Pull from "title" in slides array) }; //Default elements var element = $('#supersized'); //Supersized container var pauseplay = '#pauseplay'; //Pause/Play //Combine options with default settings if (options) { var options = $.extend(settings, options); //Pull from both defaults and supplied options }else{ var options = $.extend(settings); //Only pull from default settings } //General slideshow variables var inAnimation = false; //Prevents animations from stacking var isPaused = false; //Tracks paused on/off var image_path = options.image_path; //Default image path for navigation control buttons //Determine starting slide (random or defined) if (options.start_slide){ var currentSlide = options.start_slide - 1; //Default to defined start slide }else{ var currentSlide = Math.floor(Math.random()*options.slides.length); //Generate random slide number } //If links should open in new window var linkTarget = options.new_window ? ' target="_blank"' : ''; //Set slideshow quality (Supported only in FF and IE, no Webkit) if (options.performance == 3){ element.addClass('speed'); //Faster transitions } else if ((options.performance == 1) || (options.performance == 2)){ element.addClass('quality'); //Higher image quality } /***Load initial set of images***/ if (options.slides.length > 1){ //Set previous image currentSlide - 1 < 0 ? loadPrev = options.slides.length - 1 : loadPrev = currentSlide - 1; //If slide is 1, load last slide as previous var imageLink = (options.slides[loadPrev].url) ? "href='" + options.slides[loadPrev].url + "'" : ""; $("<img/>").attr("src", options.slides[loadPrev].image).appendTo(element).wrap('<a ' + imageLink + linkTarget + '></a>'); } //Set current image imageLink = (options.slides[currentSlide].url) ? "href='" + options.slides[currentSlide].url + "'" : ""; $("<img/>").attr("src", options.slides[currentSlide].image).appendTo(element).wrap('<a class="activeslide" ' + imageLink + linkTarget + '></a>'); if (options.slides.length > 1){ //Set next image currentSlide == options.slides.length - 1 ? loadNext = 0 : loadNext = currentSlide + 1; //If slide is last, load first slide as next imageLink = (options.slides[loadNext].url) ? "href='" + options.slides[loadNext].url + "'" : ""; $("<img/>").attr("src", options.slides[loadNext].image).appendTo(element).wrap('<a ' + imageLink + linkTarget + '></a>'); } /***End load initial images***/ element.hide(); //Hide image to be faded in $('#controls-wrapper').hide(); //Hide controls to be displayed $(window).load(function(){ $('#supersized-loader').hide(); //Hide loading animation element.fadeIn('fast'); //Fade in background $('#controls-wrapper').show(); //Display controls //Display thumbnails if (options.thumbnail_navigation){ //Load previous thumbnail currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = currentSlide - 1; $('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image)); //Load next thumbnail currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1; $('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image)); } resizenow(); //Resize background image if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title); //Pull caption from array if (!(options.navigation)) $('#navigation').hide(); //Display navigation //Start slideshow if enabled if (options.slideshow && options.slides.length > 1){ if (options.slide_counter){ //Initiate slide counter if active $('#slidecounter .slidenumber').html(currentSlide + 1); //Pull initial slide number from options $('#slidecounter .totalslides').html(options.slides.length); //Pull total from length of array } slideshow_interval = setInterval(nextslide, options.slide_interval); //Initiate slide interval //Prevent slideshow if autoplay disabled if (!(options.autoplay)){ clearInterval(slideshow_interval); //Stop slideshow isPaused = true; //Mark as paused if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png"); //If pause play button is image, swap src } //Thumbnail Navigation if (options.thumbnail_navigation){ //Next thumbnail clicked $('#nextthumb').click(function() { if(inAnimation) return false; //Abort if currently animating clearInterval(slideshow_interval); //Stop slideshow nextslide(element, options); //Go to next slide if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow return false; }); //Previous thumbnail clicked $('#prevthumb').click(function() { if(inAnimation) return false; //Abort if currently animating clearInterval(slideshow_interval); //Stop slideshow prevslide(element, options); //Go to previous slide if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow return false; }); } //Navigation controls if (options.navigation){ $('#navigation a').click(function(){ $(this).blur(); return false; }); //Next button clicked $('#nextslide').click(function() { if(inAnimation) return false; //Abort if currently animating clearInterval(slideshow_interval); //Stop slideshow nextslide(); //Go to next slide if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow return false; }); //If next slide button is image if ($('#nextslide').attr('src')){ $('#nextslide').mousedown(function() { $(this).attr("src", image_path + "arrow_right_active.png"); }); $('#nextslide').mouseup(function() { $(this).attr("src", image_path + "arrow_right_inactive.png"); }); $('#nextslide').mouseout(function() { $(this).attr("src", image_path + "arrow_right_inactive.png"); }); } //Previous button clicked $('#prevslide').click(function() { if(inAnimation) return false; //Abort if currently animating clearInterval(slideshow_interval); //Stop slideshow prevslide(); //Go to previous slide if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow return false; }); //If previous slide button is image if ($('#prevslide').attr('src')){ $('#prevslide').mousedown(function() { $(this).attr("src", image_path + "arrow_left_active.png"); }); $('#prevslide').mouseup(function() { $(this).attr("src", image_path + "arrow_left_inactive.png"); }); $('#prevslide').mouseout(function() { $(this).attr("src", image_path + "arrow_left_inactive.png"); }); } //Pause/play element clicked $(pauseplay).click(function() { if(inAnimation) return false; //Abort if currently animating if (isPaused){ if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png"); //If image, swap to pause //Resume slideshow isPaused = false; slideshow_interval = setInterval(nextslide, options.slide_interval); }else{ if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png"); //If image, swap to play //Stop slideshow clearInterval(slideshow_interval); isPaused = true; } return false; }); } //End navigation controls } //End slideshow options }); //End window load //Keyboard Navigation if (options.keyboard_nav){ $(document.documentElement).keydown(function (event) { if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_active.png"); //If image, change back button to active } else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_active.png"); //If image, change next button to active } }); $(document.documentElement).keyup(function (event) { clearInterval(slideshow_interval); //Stop slideshow, prevent buildup if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_inactive.png"); //If image, change back button to normal if(inAnimation) return false; //Abort if currently animating clearInterval(slideshow_interval); //Stop slideshow prevslide(); //Go to previous slide if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow return false; } else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_inactive.png"); //If image, change next button to normal if(inAnimation) return false; //Abort if currently animating clearInterval(slideshow_interval); //Stop slideshow nextslide(); //Go to next slide if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow return false; } else if (event.keyCode == 32) { //Spacebar if(inAnimation) return false; //Abort if currently animating if (isPaused){ if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png"); //If image, swap to pause //Resume slideshow isPaused = false; slideshow_interval = setInterval(nextslide, options.slide_interval); }else{ if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png"); //If image, swap to play //Mark as paused isPaused = true; } return false; } }); } //Pause when hover on image if (options.slideshow && options.pause_hover){ $(element).hover(function() { if(inAnimation) return false; //Abort if currently animating if(!(isPaused) && options.navigation){ if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause.png"); //If image, swap to pause clearInterval(slideshow_interval); } }, function() { if(!(isPaused) && options.navigation){ if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png"); //If image, swap to active slideshow_interval = setInterval(nextslide, options.slide_interval); } }); } //Adjust image when browser is resized $(window).resize(function(){ resizenow(); }); //Adjust image size function resizenow() { return element.each(function() { var t = $('img', element); //Resize each image seperately $(t).each(function(){ var ratio = ($(this).height()/$(this).width()).toFixed(2); //Define image ratio //Gather browser size var browserwidth = $(window).width(); var browserheight = $(window).height(); var offset; //Resize image to proper ratio if ((browserheight > options.min_height) || (browserwidth > options.min_width)){ //If window larger than minimum height or width if ((browserheight/browserwidth) > ratio){ if (options.fit_landscape && ratio <= 1){ //If landscapes are set to fit $(this).width(browserwidth); $(this).height(browserwidth * ratio); }else{ //Otherwise handle normally $(this).height(browserheight); $(this).width(browserheight / ratio); } } else { if (options.fit_portrait && ratio > 1){ //If portraits are set to fit $(this).height(browserheight); $(this).width(browserheight / ratio); }else{ //Otherwise handle normally $(this).width(browserwidth); $(this).height(browserwidth * ratio); } } //End dynamic resizing } //End minimum size check //Horizontally Center if (options.horizontal_center){ $(this).css('left', (browserwidth - $(this).width())/2); } //Vertically Center if (options.vertical_center){ $(this).css('top', (browserheight - $(this).height())/2); } }); //Basic image drag and right click protection if (options.image_protect){ $('img', element).bind("contextmenu",function(){ return false; }); $('img', element).bind("mousedown",function(){ return false; }); } return false; }); }; //Next slide function nextslide() { if(inAnimation) return false; //Abort if currently animating else inAnimation = true; //Otherwise set animation marker var slides = options.slides; //Pull in slides array var currentslide = element.find('.activeslide'); //Find active slide currentslide.removeClass('activeslide'); //Remove active class if ( currentslide.length == 0 ) currentslide = element.find('a:last'); //If end of set, note this is last slide var nextslide = currentslide.next().length ? currentslide.next() : element.find('a:first'); var prevslide = nextslide.prev().length ? nextslide.prev() : element.find('a:last'); //Update previous slide $('.prevslide').removeClass('prevslide'); prevslide.addClass('prevslide'); //Get the slide number of new slide currentSlide + 1 == slides.length ? currentSlide = 0 : currentSlide++; //If hybrid mode is on drop quality for transition if (options.performance == 1) element.removeClass('quality').addClass('speed'); /**** Image Loading ****/ //Load next image loadSlide = false; currentSlide == slides.length - 1 ? loadSlide = 0 : loadSlide = currentSlide + 1; //Determine next slide imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : ""; //If link exists, build it $("<img/>").attr("src", options.slides[loadSlide].image).appendTo(element).wrap("<a " + imageLink + linkTarget + "></a>"); //Append new image //Update thumbnails (if enabled) if (options.thumbnail_navigation == 1){ //Load previous thumbnail currentSlide - 1 < 0 ? prevThumb = slides.length - 1 : prevThumb = currentSlide - 1; $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image)); //Load next thumbnail nextThumb = loadSlide; $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image)); } currentslide.prev().remove(); //Remove Old Image /**** End Image Loading ****/ //Update slide number if (options.slide_counter){ $('#slidecounter .slidenumber').html(currentSlide + 1); } //Update captions if (options.slide_captions){ (options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html(''); } nextslide.hide().addClass('activeslide'); //Update active slide switch(options.transition){ case 0: //No transition nextslide.show(); inAnimation = false; break; case 1: //Fade nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); }); break; case 2: //Slide Top nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 3: //Slide Right nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 4: //Slide Bottom nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 5: //Slide Left nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 6: //Carousel Right nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); currentslide.animate({ left: -$(window).width() }, options.transition_speed ); break; case 7: //Carousel Left nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); currentslide.animate({ left: $(window).width() }, options.transition_speed ); break; }; } //Previous Slide function prevslide() { if(inAnimation) return false; //Abort if currently animating else inAnimation = true; //Otherwise set animation marker var slides = options.slides; //Pull in slides array var currentslide = element.find('.activeslide'); //Find active slide currentslide.removeClass('activeslide'); //Remove active class if ( currentslide.length == 0 ) currentslide = $(element).find('a:first'); //If end of set, note this is first slide var nextslide = currentslide.prev().length ? currentslide.prev() : $(element).find('a:last'); var prevslide = nextslide.next().length ? nextslide.next() : $(element).find('a:first'); //Update previous slide $('.prevslide').removeClass('prevslide'); prevslide.addClass('prevslide'); //Get current slide number currentSlide == 0 ? currentSlide = slides.length - 1 : currentSlide-- ; //If hybrid mode is on drop quality for transition if (options.performance == 1) element.removeClass('quality').addClass('speed'); /**** Image Loading ****/ //Load next image loadSlide = false; currentSlide - 1 < 0 ? loadSlide = slides.length - 1 : loadSlide = currentSlide - 1; //Determine next slide imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : ""; //If link exists, build it $("<img/>").attr("src", options.slides[loadSlide].image).prependTo(element).wrap("<a " + imageLink + linkTarget + "></a>"); //Append new image //Update thumbnails (if enabled) if (options.thumbnail_navigation == 1){ //Load previous thumbnail prevThumb = loadSlide; $('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image)); //Load next thumbnail currentSlide == slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1; $('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image)); } currentslide.next().remove(); //Remove Old Image /**** End Image Loading ****/ //Update slide counter if (options.slide_counter){ $('#slidecounter .slidenumber').html(currentSlide + 1); } //Update captions if (options.slide_captions){ (options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html(''); } nextslide.hide().addClass('activeslide'); //Update active slide switch(options.transition){ case 0: //No transition nextslide.show(); inAnimation = false; break; case 1: //Fade nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); }); break; case 2: //Slide Top (reverse) nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 3: //Slide Right (reverse) nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 4: //Slide Bottom (reverse) nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 5: //Slide Left (reverse) nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); break; case 6: //Carousel Right (reverse) nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); currentslide.animate({ left: $(window).width() }, options.transition_speed ); break; case 7: //Carousel Left (reverse) nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); }); currentslide.animate({ left: -$(window).width() }, options.transition_speed ); break; }; } //After slide animation function afterAnimation() { inAnimation = false; //If hybrid mode is on swap back to higher image quality if (options.performance == 1){ element.removeClass('speed').addClass('quality'); } resizenow(); } }; })(jQuery); </code></pre> <p>in the HEAD</p> <pre><code><link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="js/supersized.3.1.1.min.js"></script> <script type="text/javascript"> jQuery(function($){ $.supersized({ //Functionality slideshow : 1, //Slideshow on/off autoplay : 1, //Slideshow starts playing automatically start_slide : 1, //Start slide slide_interval : 3000, //Length between transitions transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 500, //Speed of transition new_window : 1, //Image links open in new window/tab pause_hover : 0, //Pause slideshow on hover keyboard_nav : 1, //Keyboard navigation on/off performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) //Size & Position min_width : 0, //Min width allowed (in pixels) min_height : 0, //Min height allowed (in pixels) vertical_center : 1, //Vertically center background horizontal_center : 1, //Horizontally center background fit_portrait : 1, //Portrait images will not exceed browser height fit_landscape : 0, //Landscape images will not exceed browser width //Components navigation : 1, //Slideshow controls on/off thumbnail_navigation : 1, //Thumbnail navigation slide_counter : 1, //Display slide numbers slide_captions : 1, //Slide caption (Pull from "title" in slides array) slides : [ //Slideshow Images {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'}, {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day3-emily.jpg', title : 'Day 3 by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'}, {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness2.jpg', title : 'Wilderness by Larissa Felsen', url : 'http://www.nonsensesociety.com/2011/02/larissa/'} ] }); }); </script> </code></pre> <p>Body:</p> <pre><code> <div id="prevthumb"></div> <div id="nextthumb"></div>  <div id="controls-wrapper"> <div id="controls">  <div id="slidecounter"> <span class="slidenumber"></span>/<span class="totalslides"></span> </div>  <div id="slidecaption"></div>  <div id="navigation"> <img id="prevslide" src="img/back_dull.png"/><img id="pauseplay" src="img/pause_dull.png"/><img id="nextslide" src="img/forward_dull.png"/> </div> </div> </div> </code></pre> <p>Hopefully the above helps.</p> <p>thanks!</p>
Tags
<jquery><navigation><gallery>
Title
Changing fullscreen gallery navigation to bullet-navigation
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USOmar
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POChanging fullscreen gallery navigation to bullet-navigation
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POChanging fullscreen gallery navigation to bullet-navigation
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POChanging fullscreen gallery navigation to bullet-navigation
  UserUserId
  UScindyg
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId

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.