Databases
StackOverflow2013
Postsdbo
PObuilding a Jquery Tool slider like yahoo.com slider details
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PObuilding a Jquery Tool slider like yahoo.com slider details
    primarykey
    data
    text
    <p>Hi im trying to achieve a "news slider" like the one you can see in yahoo.com... I almost have the 100% of the code.. (if you want to compare them here is my code <a href="http://jsfiddle.net/PcAwU/1/" rel="nofollow">http://jsfiddle.net/PcAwU/1/</a>) </p> <p>what is missing in my code , (forget about design) is that , In my slider you have to clic on each item, i tried to replace Onclick for Hover on the javascript, it worked, but the fisrt image on the gallery stop working, so when you just open the slider, you see a missing image.</p> <p>Other point.. also very important, in yahoo.com after "x seconds" the slider goes to the next item, and so on ... all the Thumnails are gruped 4 by for 4, (in mine 5 by 5, thats ok) ... after pass all the 4 items, it go to the next bloc.. </p> <p>HOW CAN I ACHIEVE THAT!!. I really looked into the API, everything, really im lost, i hope someone can help me. cause im really lost in here.</p> <p>Thanks</p> <p>Here is the script </p> <pre><code>$(function() { var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true }); $(".items img").click(function() { // see if same thumb is being clicked if ($(this).hasClass("active")) { return; } // calclulate large image's URL based on the thumbnail URL (flickr specific) var url = $(this).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); // 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", url); }; // begin loading the image from www.flickr.com img.src = url; // activate item $(".items img").removeClass("active"); $(this).addClass("active"); // when page loads simulate a "click" on the first image }).filter(":first").click(); // provide scrollable API for the action buttons window.api = root.data("scrollable"); }); function toggle(el){ if(el.className!="play") { el.className="play"; el.src='images/play.png'; api.pause(); } else if(el.className=="play") { el.className="pause"; el.src='images/pause.png'; api.play(); } return false; } </code></pre>
    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. USDreaminMedia Queretaro
    plurals
    1. PL
      singulars
      1. LTLinked
    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. PObuilding a Jquery Tool slider like yahoo.com slider details
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PObuilding a Jquery Tool slider like yahoo.com slider details
      1. USDreaminMedia Queretaro
      1. VTFavorite
    3. VO
      singulars
      1. PObuilding a Jquery Tool slider like yahoo.com slider details
      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