.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Forum >> JavaScript/VBScript >> Post New QuestionBookmark and Share Subscribe to Forum

How to loop image details in array with prev/next functionality?

Posted By: Murali     Posted Date: September 04, 2014    Points:5   Category :JavaScript/VBScript
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.

<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 used array list and kept "alert" also, it displaying total images number.

Responses
Author: Sambanthamoorthy             
Posted Date: September 11, 2014     Points: 20   

<style>
#scrollPics {
height: 150px;
width: 100%;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}

.num {
position: absolute;
right: 5px;
bottom: 5px;
}

#scrollPics .num li {
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}

#scrollPics .num li.on {
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>


<script>
$(function () {
//images details array
var imgdetails = new Array("This is picture1 detail", "This is picture2 detail", "This is picture3 detail", "This is picture4 detail", "This is picture5 detail");
var len = imgdetails.length-1;
var index = 0; //image index
$("#details").hide();

$("#pre").click(function () {
if (index == 0) {
index = len;
showImg(index);
}
else {
index = index - 1;
showImg(index);
}
alert(index);
return false;
});

$("#next").click(function () {
if (index == 4) {
index = 0;
showImg(index);
}
else {
index = index + 1;
showImg(index);
}
alert(index);
return false;
});

//click image to show image details
$(".slider li").click(function () {
$("#details").show();
$("#details").html(imgdetails[index]);
})

function showImg(index) {
var adHeight = $("#scrollPics>ul>li:first").height();
$(".slider").stop(true, false).animate({
"marginTop": -adHeight * index + "px"
}, 1000);
}
})
</script>

<div id="scrollPics">
<ul class="slider">
<li>
<img src="../../Images/1.png" /></li>
<li>
<img src="../../Images/2.png" /></li>
<li>
<img src="../../Images/3.png" /></li>
<li>
<img src="../../Images/4.png" /></li>
<li>
<img src="../../Images/5.png" /></li>
</ul>
</div>
<div id="details" style="width:100%;height:40px;">

</div>
<div style="width: 100%">
<asp:HyperLink ID="pre" runat="server">Previous</asp:HyperLink>
&nbsp;&nbsp;
<asp:HyperLink ID="next" runat="server">Next</asp:HyperLink>
</div>



Post Reply

You must Sign In To post reply
 
 
Find more Forum Questions on C#, ASP.Net, Vb.Net, SQL Server and more Here
Quick Links For Forum Categories:
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  OOPs  SilverlightIISJQuery
JavaScript/VBScriptBiztalkWPFPatten/PracticesWCFOthers
www.DotNetSpark.comUnAnsweredAll

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend