@David...
Yes I will be uploading the images via Couch Admin Panel. And will also require to change the name of the image automatically as the slider requires the name of the image to be same and only the numbering of the image will change.
If you see the script:
- Code: Select all
<script>
$(function() {
var num = 12; // the total number of images
// Preload all the images into hidden div
for (var i=1 ; i<=num ; i++) {
var img = document.createElement('img');
img.src = 'images/3dimages/car_('+i+').jpg';
document.getElementById('preload-imgs').appendChild(img);
}
// Control swipes using jquery.touchSwipe.min.js
// http://labs.rampinteractive.co.uk/touchSwipe/
var swipeOptions=
{
triggerOnTouchEnd : true,
swipeStatus : swipeStatus,
allowPageScroll:"vertical",
threshold:75
}
$(function()
{
imgs = $(".img-container"); // the element that will be swipeable
imgs.swipe( swipeOptions );
});
function swipeStatus(event, phase, direction, distance) {
var duration = 0;
if(direction == "left") {
changeImg(distance);
}
else if (direction == "right") {
changeImgR(-distance);
}
}
function changeImg (imgNum) {
// spread it out so it doesn't load new img every single px of swipe distance
imgNum = Math.floor(imgNum/8);
if (imgNum < 1) {
imgNum += num;
}
if (imgNum > num) {
imgNum -= num;
}
// change the image src
document.getElementById("myImg").src="images/3dimages/car_("+imgNum+").jpg";
}
function changeImgR (imgNum) {
// spread it out so it doesn't load new img every single px of swipe distance
imgNum = Math.floor(imgNum/8);
var num2 = -Math.abs(num);
if (imgNum > num2) {
imgNum += num;
}
if (imgNum <= num2) {
imgNum += num*2;
}
// change the image src
document.getElementById("myImg").src="images/3dimages/car_("+imgNum+").jpg";
}
})
</script>
The particular lines that highlight the fact that the image will be numbered sequentially are at these 3 places (the script is at the page end):
- Code: Select all
...
img.src = 'images/3dimages/car_('+i+').jpg';
...
...
function changeImg (imgNum) {
...
// change the image src
document.getElementById("myImg").src="images/3dimages/car_("+imgNum+").jpg";
}
function changeImgR (imgNum) {
...
// change the image src
document.getElementById("myImg").src="images/3dimages/car_("+imgNum+").jpg";
}
...
So I am looking at being able to not just upload but also rename the image as per sequence if that is possible. 'Coz then it will save the trouble at the client end to do that over and over again.
Regards,
GenXCoders
3d.zip
...........
