Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Okay, never tried jQueryTOOLS, so thought it would be fun to play with.</p> <p>first of all, here's the JSFiddle I just created: <a href="http://jsfiddle.net/xHL35/1/">http://jsfiddle.net/xHL35/1/</a></p> <p>Now, the API calls need a variable to hold it</p> <pre><code> $(".scrollable").scrollable(); var scrollapi = $(".scrollable").data("scrollable"); </code></pre> <p>Now scrollapi, can call the functions like this:</p> <pre><code>scrollapi.next(200); </code></pre> <p>I've copied your own code for choosing image and just rewritten it to fit the NEXT image. I haven't created the PREV function, but should not be that hard to reverse the NEXT function.</p> <pre><code>$(".nextImg").click(function(){ // Count all images var count = $(".items img").length; // Finding the next image var next = $(".items").find(".active").next("img"); // Is the next image, the last image in the wrapper? if(next.is(":last")){ // If it is, go to next DIV and get the first image next = $(".items").find(".active").parent().next("div").find("img:first"); // If this dosn't exists, we've reached the end if(next.index() == -1){ // We have reached the end - start over. next = $(".items img:first"); scrollapi.begin(200); } else { // Not at the end, show next div in thumbs scrollapi.next(200); } } // Get the current image number var current = (next.index("img")); var nextUrl = next.attr("src").replace("_t", ""); // get handle to element that wraps the image and make it semi-transparent var wrap = $("#image_wrap").fadeTo("medium", 0.5); var wrap2 = $("#mies1"); // the large image from www.flickr.com var img = new Image(); // call this function after it's loaded img.onload = function() { // make wrapper fully visible wrap.fadeTo("fast", 1); // change the image wrap.find("img").attr("src", nextUrl); wrap2.find("img").attr("src", nextUrl); }; // begin loading the image from www.flickr.com img.src = nextUrl; // Show the counter $("#imageCounter").html("Image: "+current+" of "+count); // activate item $(".items img").removeClass("active"); next.addClass("active"); }); </code></pre> <p>Hoping you can use this to develop the rest of the gallery.</p>
    singulars
    1. This table or related slice is empty.
    1. POPrev & Next button with counter for overlay using jQuery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USLasse
    1. USLasse
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POPrev & Next button with counter for overlay using jQuery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou are my hero!!! but you missunderstood one part, and im really sorry, sure was my bad english.. I need the NExt and Prev inside the "pop" or "main image" as i call it... so once it "pops" you can go trough all images (not outside de "pop"):D (thanks really its awesome, im sure i cant even do what yo just did!
      singulars
      1. PO
      1. USJules Martinez
    2. COAnd i will need to style them isnt better to use a normal <a href>
      singulars
      1. PO
      1. USJules Martinez
    3. COI just move the button and still works even inside the Overlay, pls let me know how can i change it to normal <a href> and i hope i can manage to do prev function. http://jsfiddle.net/xHL35/2/ . If no better answer is given you are the winner pal
      singulars
      1. PO
      1. USJules Martinez
 

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