SwipeView

[Matteo Spinelli]

Not strictly related to the iScroll but you might be interested in SwipeView http://cubiq.org/swipeview

SwipeView is the super simple solution to endless seamlessly loopable carousels for the mobile browser

Cheers,

Matteo

[Marcus]

This is very cool, Matteo. SwipeView responds better to swipe actions than iScroll4 with snap-to! Why is that? I just tested it on an Android device with the carousel snap-to demo.

I could use this in an app to let the user select a theme. Two questions:

- How would I call a function when an image is selected/touched? (to tell the app which image was selected)

- Would it be possible to display two images side by side? (and scroll either one or two images at a time).

Thanks for the great plugins.

[Matteo Spinelli]

On Monday, October 10, 2011 4:23:50 AM UTC+2, Marcus wrote:

This is very cool, Matteo. SwipeView responds better to swipe actions than iScroll4 with snap-to! Why is that?

because it's a very specialized script just for that, iScroll is general purpose.

 

- How would I call a function when an image is selected/touched? (to tell the app which image was selected)

you have to wait for custom events, coming later this week.

 

- Would it be possible to display two images side by side? (and scroll either one or two images at a time).

in v0.3 will be possible to display anything in the slide.

Matteo

[Wordit]

  What is the best way to be notified of a new release?

[Matteo Spinelli]

follow me on twitter (http://twitter.com/#!/Cubiq) or follow the github repo (https://github.com/cubiq/SwipeView)

Matteo

[hw.master]

Very, very good job Matteo,
just a little question.
There's a way to stop the swipe of the gallery at the last picture?
i've tried to check in the gallery.onFlip(function () ...
the slides.length and the current page with gallery.pageIndex+1
for stop the gallery without success.

Can be possible do this?

Any suggestions is very appreciated.

Cheers

[Matteo Spinelli]

It's in my to-do. As soon as I get some spare time.... :)

[hw.master]

Thanks Matteo!
i'll waiting for this update.

[Matteo Spinelli]

you can now disable looping with loop:false option.

Matteo

[hw.master]

Thanks Matteo,
cheers.

i'll try it

[hw.master]

Thank Matteo for the loop:false option,
works perfectly!

I do not understand if it's possible set a generic 100% option for the
width and height
of the picture for not set it individually for each ones and always be
sure that fit with
the scrren size and current orientation of the mobile device.

Thanks for your time.
Cheers

> > Matteo- Nascondi testo citato
>
> - Mostra testo citato -

[hw.master]

Hi,
I've tried to add at the bottom of the galllery a text that displayed
the current photo and the total number of photos, sometingh like this
1/10.

I able to retrievethe total number of page with slides.length

I've tried to add in the gallery.onMoveOut gallery.page+1 and in
gallery.onMoveIn
gallery.page-1
but not seem to work correctly becuase do not count exactly.

There is a way for counting the current page?
where must be called?
in onMoveOut, onMoveIn, in other function?

Thanks for your hel and for your time.
I think could be usefull for other guys.

Cheers.

> > - Mostra testo citato -- Nascondi testo citato

[hw.master]

Please, No suggestion?
Thanks.

[hw.master]

I solved in this way and seems to works correctly,
just in case someone need.

on the gallery.onFlip(function () i've added

document.getElementById('your-div-id').innerHTML = (gallery.pageIndex
+1)+" / "+slides.length;
as showed below
...
el = gallery.masterPages[i].querySelector('span');
el.innerHTML = slides[upcoming].desc;
}

document.getElementById('counter').innerHTML = (gallery.pageIndex
+1)+" / "+slides.length;
....

Cheers

[Matteo Spinelli]

yes, that is the right way of doing it ;)

M

[Manmade]

hw.master
Sounds great, very good.
Would you mind charing a working page that I could look at?
Thanks!

[digitalfreak]

great work! on both the iscroll and swipeview!  I was trying to mimic the facebook iOS app by HTML , JS and CSS that, a list can have vertical scroll and within one row there might be images that could be horizontal scrolled, and during the horizonital scroll, vertical scroll will be "locked".

I was thinking if i could nested the iscroll (s), i.e. putting one big vertical iscroll at the outside, and for some "row(s)" there will be horizonital iscroll(s), does iscroll support nesting?

Or Could I have swipeview (scroll horizontal) for row(s) within a vertical iscroll ? i.e. could i embed multiple swipeview with in iscroll ?

thank in advance for your suggestion.

[hw.master]

Hi Manmade,
it's not online.
This is the full code example for the gallery used in my project.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Gallery</title>
<script type="text/javascript" src="../src/swipeview.js"></script>
<style>
html, body { height:100%; }
body {
padding:0;
margin:0;
background:#000;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
color:#000;
font-family:helvetica;
font-size:12px;
}

#wrapper {
width:100%;
min-width:320px;
height:100%;
}

#counter {
position:absolute;
z-index:100;
bottom:7px;
width:100%;
height:26px;
/*left:50%;*/
text-align:center;
color:#FFFFFF;
font-family:helvetica;
font-size:18px;
}

#nav {
position:absolute;
z-index:100;
bottom:8px;
width:200px;
height:20px;
left:50%;
/*background:rgba(0,0,0,0.75);*/
padding:0;
margin:0 0 0 -100px;
-webkit-border-radius:10px;
}

#nav li {
display:block;
float:left;
width:10px;
height:20px; line-height:14px;
-webkit-border-radius:7px;
background:rgba(255,255,255,0.5);
overflow:hidden;
padding:0;
margin:3px 11px 0 0;
text-align:center;
}

#nav li#prev {
margin-left:5px;
background:transparent;
}

#nav li#next {
margin-right:0;
background:transparent;
}

#nav li.selected {
background:rgba(255,255,255,0.4);
}

#swipeview-slider > div {
position:relative;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
}

#swipeview-slider img {
display:block;
/*border:1px solid #eee;*/
/*-webkit-box-shadow:0 2px 6px #000;
-webkit-border-radius:1px;*/
-webkit-transition-duration:.4s;
-webkit-transition-property:opacity;
opacity:1;
pointer-events:none;
}

/*#swipeview-slider span {
position:absolute;
bottom:0;
left:0;
width:100%;
padding:20px 0;
display:block;
background:rgba(0,0,0,0.75);
font-size:20px;
text-align:center;
text-shadow:0 1px 0 #000;
border-top:1px solid rgba(255,255,255,0.2);
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-transition-duration:.3s;
-webkit-transition-property:-webkit-transform;
-webkit-transform:translate3d(0,100%,0);
}

#swipeview-slider .swipeview-active span {
-webkit-transform:translate3d(0,0,0);
}*/

#wrapper > div > .swipeview-loading {
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#444),
to(#555)),
-webkit-gradient(linear, 0 0, 100% 0, from(#777), to(#777));
background-position:50% 50%, 50% 50%;
background-size:200px 140px, 210px 150px;
background-repeat:no-repeat;
}

#wrapper > div > .swipeview-loading img,
#swipeview-slider img.loading {
-webkit-transition-duration:0;
opacity:0;
}

#wrapper > div > .swipeview-loading span {
-webkit-transition-duration:0;
-webkit-transform:translate3d(0,100%,0);
}

.footer {
-webkit-box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 10px;
height: 44px;
background: url(toolbar.png) #000000 repeat-x;
position:absolute;
bottom:0;
left:0;
width:100%;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<div id="counter"></div>
<script type="text/javascript">
document.addEventListener('touchmove', function (e)
{ e.preventDefault(); }, false);

var gallery,
el,
i,
page,
dots = document.querySelectorAll('#nav li'),
slides = [
{
img: 'gallery/1.jpg',
width: 1024,
height: 768,
desc: ''
},
{
img: 'gallery/2.jpg',
width: 1024,
height: 768,
desc: ''
}
];
</script>
<script type="text/javascript">
gallery = new SwipeView('#wrapper', { numberOfPages:
slides.length,loop: false });

document.getElementById('counter').innerHTML = "1 / "+slides.length;

// Load initial data
for (i=0; i<3; i++) {
page = i==0 ? slides.length-1 : i-1;
el = document.createElement('img');
el.className = 'loading';
el.src = slides[page].img;
el.width = slides[page].width;
el.height = slides[page].height;
el.onload = function () { this.className = ''; }
gallery.masterPages[i].appendChild(el);

el = document.createElement('span');
//el.innerHTML = slides[page].desc;
gallery.masterPages[i].appendChild(el)
}

gallery.onFlip(function () {
var el,
upcoming,
i;

for (i=0; i<3; i++) {
upcoming = gallery.masterPages[i].dataset.upcomingPageIndex;

if (upcoming != gallery.masterPages[i].dataset.pageIndex) {
el = gallery.masterPages[i].querySelector('img');
el.className = 'loading';
el.src = slides[upcoming].img;
el.width = slides[upcoming].width;
el.height = slides[upcoming].height;

el = gallery.masterPages[i].querySelector('span');

//el.innerHTML = slides[upcoming].desc;

}

document.getElementById('counter').innerHTML = (gallery.pageIndex
+1)+" / "+slides.length;
}

document.querySelector('#nav .selected').className = '';
dots[gallery.pageIndex+1].className = 'selected';


});

gallery.onMoveOut(function () {
//gallery.masterPages[gallery.currentMasterPage].className =
gallery.masterPages[gallery.currentMasterPage].className.replace(/(^|
\s)swipeview-active(\s|$)/, '');');
});

gallery.onMoveIn(function () {
//var className =
gallery.masterPages[gallery.currentMasterPage].className;
///(^|\s)swipeview-active(\s|$)/.test(className) ||
(gallery.masterPages[gallery.currentMasterPage].className = !
className ? 'swipeview-active' : className + ' swipeview-active');
});
</script>
<div class="footer"></div>
</body>
</html>

> > M- Nascondi testo citato

[Manmade]

Thanks hw.master
I was interested in the "page 1/2" part.
What in the code handels that part?

I can probebly find it out, but I will save some time if you can tell me the
right way to do it :-)
Thanks.

[hw.master]

in the html page
<div id="counter"></div> css positioned in the center bottom of the
page

in the script section

document.getElementById('counter').innerHTML = "1 / "+slides.length;

for the first pictures

document.getElementById('counter').innerHTML = (gallery.pageIndex
+1)+" / "+slides.length;

for update the counter in the gallery.onFlip function

Cheers.

[Manmade]

Your the man :-) thanks a lot!
Ill test it in my page!