2

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 http://jsfiddle.net/PcAwU/1/)

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.

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..

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.

Thanks

Here is the script

$(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;
}

1 Answers1

2

To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.

$(".items img").on("hover",function() {
....

Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.

}).filter(":first").trigger("mouseover");

jSFiddle: http://jsfiddle.net/PcAwU/2/


Now to have a play feature, you need a counter/ and a set interval like so:

var count = 1;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
        $(".items img").eq(count).trigger("mouseover");
    } else count = 0; //reset counter
},1000);

This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.

jSFiddle: http://jsfiddle.net/PcAwU/3/


If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:

.scrollable .active {
    ....
    border-bottom:3px solid skyblue;

Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/

Kivylius
  • 6,357
  • 11
  • 44
  • 71
  • Great! it worked, do you have any idea about the other point, ?? – DreaminMedia Queretaro May 06 '13 at 21:42
  • @DreaminMediaQueretaro Added it to the question. – Kivylius May 06 '13 at 21:45
  • is on the question this part..... 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.. HOW CAN I ACHIEVE THAT!!. – DreaminMedia Queretaro May 06 '13 at 21:47
  • 1
    @DreaminMediaQueretaro Sorry, I can't understand what you mean by that question – Kivylius May 06 '13 at 21:50
  • Sorry its my bad english.. if you go to yahoo.com you will see a slider.. in that slider, the "ACTIVE" item is in a blue color, each 5 seconds i think the next image or item is selected as active.. and after 5 seconds the next image.. This is automatic no need of hover or clic or anything. cheers – DreaminMedia Queretaro May 06 '13 at 21:56
  • @DreaminMediaQueretaro Have you not seen my example I have up in my question above? Is that wrong? It changes images every 1 seconds (dont hover over anything) Look at my question, I have added more things to it and tell me if its wrong. – Kivylius May 06 '13 at 22:01
  • NO its very nice actually!!, i just see it, i just have a question here, Now everything is working, but how do i set a CSS style or class, or ID, to modify the appearence of the active item.. i think you insert this class, via java, am i wrong?.. By the way, .... Are you the best or what. – DreaminMedia Queretaro May 06 '13 at 22:03
  • 2
    @DreaminMediaQueretaro Updated question. Look above. – Kivylius May 06 '13 at 22:19
  • @Jessica Girl I love your code, i take a part im trying to achieve this http://stackoverflow.com/questions/16825046/build-prev-next-button-on-jquery-for-images-inside-overlay pls help!!! i see you are a expert on jquerytools, pls HEEEELP! jajaja im desperate!! no one answer this!!! – Jules Martinez May 30 '13 at 03:01