jquery mb.scrollable

Scroll your content!

Need to show many elements in constricted space?
1, 2, 3, 15…slide how many box you want with a simple and configurable navigation toolbar.

v. 1.7.0

see the demodownload itsee the documentation

PayPal

What’s new in v. 1.7.0:

Introduced two more callbacks:

  • loadCallback: that is invoked once the component is loaded
  • changePageCallback: that is invoked each time a page is changed.

Cleaned up the code:

  • all the methods that changes the actual page refer to the “gotoPage” one.

177 Responses

  1. Fotos de Productos
    Fotos de Productos at · Reply

    Matteo: Thank´s one again. When i saw no pictures in my scrollable area, i entered your site, and obviously the was the answer of the problem of the $.browser.
    Thank´s a lot
    Gustavo Guido

  2. sa.
    sa. at · Reply

    Hi Matt,

    Please forgive the junior question, but I am interested in using this plugin via text links; from what I can tell the plugin currently only provides a way to access pages via the numbered indexes. Is there a relatively straight-forward way to change the controls so that they are some custom text? I know I can probably figure it out, eventually but it will take me much longer than a more well-seasoned developer like yourself…

    I really love your plugins btw! Thanks for sharing!

    Cheers,

    sa.

    1. Matteo Bicocchi
      Matteo Bicocchi at ·

      Hi sa,
      yes, there’s the way but you have to create the index by hand:

      1) remove the “#pageIndex” DIV from the “#controls”; this way the numbered index doesn’t show.
      2) replace it with a DIV where you’ll place your custom textual index as follow:
      [sourcecode language="html"]<div id="customIndex"><span class="page" onclick="$(‘#myScroll’).goToPage(1)">label 1</span><span class="page" onclick="$(‘#myScroll’).goToPage(2)">label 2</span><span class="page" onclick="$(‘#myScroll’).goToPage(…)">label …</span></div>[/sourcecode]
      Just take care to create as many span as the elements in the scrollable are.

      That’s all.
      Hope this helps you,
      Bye,
      Matteo

    2. sa.
      sa. at ·

      Grazie Matteo!

      Molto utile!

      Non ho letto tutti i messaggi/domande precedenti prima …. mi dispiace!

      Grazie ancora!
      sa.
      :)

  3. totophe
    totophe at · Reply

    hello and thanks
    i am only on local website now, and having problem with opera displaying all scrolling content on same time..
    is there specific thing for that only in opera?
    thanks

  4. Marko
    Marko at · Reply

    Hi
    Thanks for nice plugin.
    How i can stop scroller programmatically?

    Thank You.

  5. Fotos de Productos
    Fotos de Productos at · Reply

    Matteo: ante todo, muchas gracias por tu amabilidad hacia con todas tus respuestas que he leído detenidamente y por sobre todo, tu buen ojo para el diseño, creatividad para el diseño y amabilidad por no guardártelo para vos solo. Te comento que quise incluir el Scrollable en mi sitio, y al no funcionar, decidí armar una página exclusivamente con el Scrollable para poder detectar los errores, pero aun así no consigo saber qué es lo que no funciona. Veo la botonera (siempre hab lando del scroll horizontal, ya que la parte del vertical la saqué), pero no las fotos que están todas escaladas al mismo tamaño, ni un .png que subí a modo de marco de las fotos. La dirección es http://www.deltaredes.com.ar/pruebaindex010.html Muchas gracias. Gustavo

    1. Matteo Bicocchi
      Matteo Bicocchi at ·

      Hi,
      As I can see you loose something in the script:

      $("#myScroll").mbScrollable({
      width:"343",
      elementsInPage:1,
      elementMargin:2,
      shadow:"#999 2px 2px 2px",
      height:"257",
      controls:"#controls",
      slideTimer:600,
      autoscroll:true,
      scrollTimer:4000
      });
      setTimeout(function(){$("#wrapper").fadeIn();},2000);
      });

      should be:

      $(function(){
      $("#myScroll").mbScrollable({
      width:"343",
      elementsInPage:1,
      elementMargin:2,
      shadow:"#999 2px 2px 2px",
      height:"257",
      controls:"#controls",
      slideTimer:600,
      autoscroll:true,
      scrollTimer:4000
      });
      setTimeout(function(){$("#wrapper").fadeIn();},2000);
      });

      Bye,
      Matteo

    2. Fotos de Productos
      Fotos de Productos at ·

      Matteo: Thanks a lot for your time. I will send you the link when the page is done.
      Regards and have a great 2012
      Gustavo Guido

  6. reefaquariumsupplies
    reefaquariumsupplies at · Reply

    You need a forum with all these comments to figure out what’s going on. I am trying to implement this but I can’t seem to get the CSS all lined up.

    1. Matteo Bicocchi
      Matteo Bicocchi at ·

      Hi,
      There’s the jQueryExchange Q&A at http://jquery.pupunzi.com if you want.
      What is your problem exactly?

      Bye,
      M

1 7 8 9

Leave a Reply