plusview

plusview is a jquery plugin that provides a slideshow style effect for list items similar to the google play store screenshots

markup

first you'll need to get your markup looking like this:

<div class="plusview">
    <ul>
        <li>
            <a href="/bebe_models/x400/0.jpg" data-type="image">
                <img src="/bebe_models/x400/0.jpg" border="0"/>
            </a>
        </li>
        …
    </ul>
</div>

... and some css kind of like this:

.plusview {
	overflow: hidden;
	-moz-user-select:'-moz-none';
	-moz-user-select:none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.plusview ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.plusview ul li {
	display: inline;
}
.plusview ul li img {
	height: 105px;
}

with plusview

then we apply plusview. the plugin only uses nodes with the data-type attribute set to "image". others may be added later.

$('#plusview1').plusview();

without animation

this example is for those who hate all animations. we've also set a custom height here as well.

$('#plusview2').plusview({
    height: 400,
    hide: "hide",
    show: "show",
    scrollIntoView: false
});

auto mode

the plugin can also be configured to automatically show an item by index, show it for 5 seconds, wrap around to the first one when going past the last one and calling a function after each change to update a label.

$('#plusview3').plusview({
    height: 200,
    showItem: 3,
    duration: 5000,
    wrap: true,
    onChange: function(el) {...}
});

the api

you can pass in an options object to configure your plusview.

source code