Is it possible, slide a simple html page

[lgs]

I need to slide/carousel simple html pages or iframes,
is it possible with Slider.js ?

... follow a page sample I'd like to convert in a carousel : http://gitwatcher.com/
the object I'd like to slide is actually

<div id="chart" style="position: relative;">
    <iframe height="540" frameborder="0" width="860" scrolling="no" name="Drawing_Frame_82178"
     id="Drawing_Frame_82178" marginheight="0" marginwidth="0">
    </iframe>
</div>

any idea ?

Thanks in advance
Luca

[gre]

Slider.js currently only support images but you could hack the library to
support any slide of HTML.

However, I'm thinking of making this recurrent need of sliding any content
easier for the next Slider.js version (but of course, only CSS transitions
will works, not canvas one's).

2011/11/20 Luca G. Soave <
reply@reply.github.com

I need to slide/carousel siple html pages or iframes,
is it possible with Slider.js ?

... follow an page sample I'd like to convert in a carousel :
http://gitwatcher.com/
any idea ?

Thanks in advance
Luca

---

Reply to this email directly or view it on GitHub:
#9

Gatan Renaudeau, @greweb http://twitter.com/greweb
blog http://blog.greweb.fr | gaetanrenaudeau.fr

[lgs]

No idea from 'where' to start hacking the lib, ... any suggestion ?

[gre]

You could create a new method "setContent" which take an Array of HTML
(which is like setPhotos but for HTML content).

You could adapt the tmpl() to fit your need.

Something like: (coffeescript)

tmplSlider = (o) ->
slider = $("""

0%

prev next

""") slider.find('.slide-images').append( $.map(o.slides, (slide) -> $(slide)[0]) ) slider.find('.slide-pager').append $.map(o.slides, (slide, i) -> $('' + (i + 1) + '')[0] ) slider

and setContent :

setContent: (@content) ->
# Templating and appending to DOM
@node = @tmpl(slides: content)
@container.empty().append @node

@_sync()

Here is the full JS code which should work (haven't tested) with the
current Slider.js:

var container = $(...);
var slider = new Slider(container);

// On fly hacks ...
slider.tmpl = function(o) {
var slider;
slider = $("<div class="slider">\n<div class="loader"><span
class="spinner"> <span class="percent">0%\n<div
class="slide-images">\n<div class="options">\n<a
class="prevSlide" href="javascript:;">prev\n<span
class="slide-pager">\n<a class="nextSlide"
href="javascript:;">next\n\n");
slider.find('.slide-images').append($.map(o.slides, function(slide) {
return $(slide)[0];
}));
slider.find('.slide-pager').append($.map(o.slides, function(slide, i) {
return $('' + (i + 1) + '')[0];
}));
return slider;
};
slider.setContent = function(content) {
this.content = content;
this.node = this.tmpl({
slides: content
});
this.container.empty().append(this.node);
};

// Using

...

slider.setContent([
'html here ...',
'html here....',
...
])

remember it will break the setPhotos, fetchJson method and will only work
for CSS transitions

2011/11/20 Luca G. Soave <
reply@reply.github.com

No idea from 'where' to start hacking the lib, ... any suggestion ?

---

Reply to this email directly or view it on GitHub:
#9 (comment)

Gatan Renaudeau, @greweb http://twitter.com/greweb
blog http://blog.greweb.fr | gaetanrenaudeau.fr

[lgs]

I'll get a try, many thanks.
(great job, my compliments!)

[gre]

created a #12 issue