How to loop image details in array with prev/next functionality?
Hi,In my html page provided "Search" function, based on "search" images will be display in thumbnails. Every image have different details. When i click 1st image details will be displaying. I want to provide "Next and Previous" (Using Next and Previous hyperlinks) function.
I used array list and kept "alert" also, it displaying total images number.
<script type="text/javascript" charset="utf-8">
var value = '';
function scaleElement(element, origin, scale) {
element.css({
transformOrigin: origin.x + "px " + origin.y + "px",
transform: "scale(" + scale + ")"
});
}
var origin = "0 0";
var scale = 1;
var router = new kendo.Router();
router.route("/", function () {
// alert('router---#view');
layout.showIn("#view", index);
});
router.route("/detail", function (params) {
// alert('router---/detail' + params.id);
detail.model.set("albumID", params.id);
layout.showIn("#view", detail, "szoom");
});
var artistID = '6487241';
var layout = new kendo.Layout("#container");
var scrollTop = 0;
var artistDS = new kendo.data.DataSource({
transport: {
read: {
url: "http://ac8e639967e647f3bec5ec2c98803b8d.cloudapp.net/api/awssearch",
dataType: "json",
data: function () {
return GetSearchOptions()
}
},
},
schema: {
model: {
id: "ListingID",
fields: {
ListingID: {
type: "int"
}
}
}
}/*,
filter: { field: "wrapperType", operator: "equals", value: "collection" }*/
});
var index = new kendo.View("index", {
wrap: false,
model: {
artistDS: artistDS,
},
init: function () {
// alert('index');
var element = this.element;
element.on("click", "a", function (e) {
var targetBox = kendo.effects.box(e.target);
var viewBox = kendo.effects.box(element);
origin = kendo.effects.transformOrigin(targetBox, viewBox);
scale = kendo.effects.fitScale(targetBox, viewBox);
});
},
transitionStart: function (e) {
// alert("T start" + e.type);
if (e.type === "show") {
scaleElement(this.element, origin, 1 / scale);
} else {
scaleElement(this.element, origin, 1);
}
},
transitionEnd: function (e) {
//alert("T end"+e.type);
if (e.type === "show") {
scaleElement(this.element, origin, 1);
this.element[0].scrollTop = scrollTop;
} else {
scaleElement(this.element, origin, 1 / scale);
scrollTop = this.element[0].scrollTop;
}
}
});
var detail = new kendo.View("detail", {
wrap: false,
model: kendo.observable({
ListingID: null,
album: null,
largeAlbumCover: function () {
// alert("max");
if (this.get("album")) {
return "url(" + this.get("album").ImageUrl.replace("100x100", "600x600") + ")";
} else {
return "none";
}
},
albumDS: new kendo.data.DataSource({
transport: {
read: {
url: function () {
var ListingUniqueID = detail.model.get("album").ListingID;
//return "http://ac8e639967e647f3bec5ec2c98803b8d.cloudapp.net/api/LiveFeedViewDetails?id=129_357817";
return "http://ac8e639967e647f3bec5ec2c98803b8d.cloudapp.net/api/LiveFeedViewDetails?id=129_" + ListingUniqueID;
},
dataType: "json"
},
},
schema: {
model: {
fields: {
ProviderId: {
type: "number"
}
}
}
},
//filter: { field: "wrapperType", operator: "equals", value: "track" }
}),
fadeTracks: function (e) {
// alert("fade tracks");
e.sender.element.show();
kendo.fx(e.sender.element).expand("vertical").play();
}
}),
transitionStart: function (e) {
// alert(" t start fade tracks");
if (e.type === "show") {
scaleElement(this.element, origin, scale);
} else {
scaleElement(this.element, origin, 1);
}
},
transitionEnd: function (e) {
// alert(" t end fade tracks");
if (e.type === "show") {
scaleElement(this.element, origin, 1);
} else {
scaleElement(this.element, origin, scale);
}
},
show: function () {
// alert('show');
this.model.set("album", artistDS.get(this.model.get("albumID")));
this.element.find("#tracks").hide();
this.model.albumDS.read();
var data = artistDS.data();
// for (var i = 0; i <= data.length; i++) {
alert(data.length);
alert(data[0].ListingID);
var listingids = new Array();
for (i = 0; i < data.length; i++) {
listingids[i] = data[i].ListingID;
alert(i);
}
$('#Previous , #Next').click(function () {
id = this.id === 'next' ? c++ : c--;
c = c == -1 ? tot - 1 : c % tot;
loadImage();
});
//alert(listingids);
//}
console.log(data.length); // displays "2"
console.log(data[0].ListingID); // displays "Jane Doe"
console.log(data[1].ListingID); // displays "John Doe"
// }
}
});
router.start();
function GetSearchOptions() {
return {
q: value
}
}
</script>
<script type="text/javascript">
$('.k-i-search').click(function (e) {
value = $('#txtAwsSearch').val();
if (value != '')
$("#tiles").data("kendoListView").dataSource.read();
else
e.preventDefault();
});
</script>
I am using kendo list view for displaying images.