We Keep Coding

How to convert data attribute value to integer for in javascript?

I've been searching everywhere for this and can't seem to find an anwser that works. What i have is a slider with arrows and buttons, when an arrow or button is clicked the function grabs the data-cs attribute which it uses to to determine the next slide.
the html
<div id="arrowleft" class="sliderbtns flip" data-sc="prev"></div>
<div id="arrowright" class="sliderbtns" data-sc="next"></div>
<div id="buttons" class="sliderbtns">
<div class="selectedbtn sliderbtns" id="button1" data-sc="1"></div>
<div class="button sliderbtns" data-sc="2"></div>
</div>
the javascript
$( ".sliderbtns" ).click(function() {
var button_data = $(this).attr('data-sc');
myslider(button_data);
});
the function in js
function myslider(position) {
if (position == "next" && (currentslide == slidecount)) {
position = 1;
} else if (position == "next") {
position = currentslide + 1;
} else if ((position == "prev") && (currentslide == 1)){
position = slidecount;
} else if ((position == "prev")) {
position = position - 1;
} else {
// position must then eqauls some integer from the data-sc attribute
position = parseInt(position);
alert (position); // alerts properly the first time
var out_slide = "Slide" + currentslide + "Out";
var next_slide = "Slide" + position;
alert(out_slide); //these work fine the first time
alert(next_slide);
window[next_slide]();
window[out_slide]();
// later on in the slide currentslide becomes position after this it returns value of Nan
setTimeout( function() {
currentslide = position;
alert("this is the current slide position" + currentslide);
}, 2000);
/* ommited code */
}
}
The arrows work fine if I just click on the arrows but when I click on a button it proprly goes to the next slide but none of the buttons no longer work and display current position as NaN, I have tried making the position variable an int in a bunch of different ways with Number(position), ToInt and ParseInt, but still after currentslide = position it returns it as Nan and the slider can no longer find the proper slides and functions etc... If any one has any idea what I could be doing wrong, how to properly make sure it's an actuall integer if that's posssible from a data attribute, or maybe some other way around I can throw that data around as and int that could be gotten by clicking the arrows or buttons. Greatly appreciate any help!

To get data use .data():
$(this).data('sc')

Seems nobody reading the question.
NaN should appear due to this:
position = currentslide + 1;
From code, I cannot see currentslide being intialized. If you do undefined + 1, you get NaN.
Globally, set currentSlide = 0 to have it work properly. Unless you're hiding code.
ps. title does not match the question posed in the description.

Switching image with Next/Previous buttons

Is there any way to switch images using next/prev buttons with jQuery? Here's the code:
<div class="prevDiv">
<img src="images/prev.png" alt="previous" />
</div>
<div class="pic" id="picwebd">
<img src="images/portfolio/webdesign/webd1.jpg" class="portPic" />
</div>
<div class="nextDiv">
<img src="images/next.png" alt="previous" />
</div>
I tried modifying this code to my needs: http://jsfiddle.net/x5mCR/16/ but I haven't succeed. I think that incrementing and decrementing number in the image src would be enough, but I can't come up with decent code do this. Google doesn't help neither.

In case anyone reading this post want a different approach still using JQuery fadeIn, Im posting below the code for that.
Here you can find the fiddle for it.
Here's the Javascript Part
//At the start will show the first image
$('#fullimage img.fullimage:first-child').fadeIn();
//Keep track of the image currently being visualized
var curr = $('#fullimage img.fullimage:first-child');
$('#next').on('click', function() {
//Hide Current Image
curr.hide();
//Find Next Image
var next = curr.next();
//If theres no next image (is the last img), go back to first
if (next.length == 0) next = $('#fullimage img:first');
//Fade In
next.fadeIn();
//Save in curr the current Image
curr = next;
return false;
});
$('#prev').on('click', function() {
curr.hide();
var prev = curr.prev();
if (prev.length == 0) prev = $('#fullimage img:last');
prev.fadeIn();
curr = prev;
return false;
});
Here's the HTML part
<div id="fullimage">
<img class="fullimage" src="http://i.imgur.com/RHhXG.jpg" />
<img class="fullimage" src="http://i.imgur.com/p1L2e.jpg" />
<img class="fullimage" src="http://i.imgur.com/NsrI0.jpg" />
<img class="fullimage" src="http://i.imgur.com/Ww6EU.jpg" />
</div>
<label id="prev">previous</label>
<label id="next">next</label>

Here is dynamic and simple script reducing your html code
http://jsfiddle.net/x5mCR/32/
$("#thumbnail a").on('click', function (eve) {
eve.preventDefault();
var link = ($(this).attr("href"));
var content = '<img src="' + link + '"/>';
$("#fullimage").hide().html(content).fadeIn('slow');
});

Remove the anchors with class thumbnail and give the corresponding <img> tags the thumbnail class, then use jQuery click methods for the thumbnail class:
$(".thumbnail").click(function() {
$(".fullimage").src = $(this).attr("src");
});
Make sure you have a single .fullimage in the #fullimage div.
This isn't the same as a next / previous button - but it would fix the JSFiddle that you made.
http://jsfiddle.net/x5mCR/34/

var picNumber = 1;
$(".nextDiv").click(function() {
picNumber++;
if (picNumber > 3) picNumber = 1; // Change 3 to how many pictures there are.
$(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg");
});
$(".prevDiv").click(function() {
picNumber--;
if (picNumber < 1) picNumber = 3; // Change 3 to how many pictures there are.
$(".pic img").attr("src", "images/portfolio/webdesign/webd" + picNumber + ".jpg");
});

If I understand correctly, you're trying to use the arrow keys to move back and forth between pictures...so if this is the case, I would recommend taking a look at this post: Binding arrow keys in JS/jQuery
Also, for your convenience, I just took the code from that post and combined it with the function in your fiddle to get this:
$(document).keydown(function (e) {
if (e.keyCode == 39) {
$(".fullimage").hide();
var next = $(this).next();
if (next.length > 0) {
next.fadeIn();
} else {
$('#fullimage img:first').fadeIn();
}
return false;
}
});
In testing it looks like it might need some modification, and also, you would obviously need to create a similar function for when the back button is pressed, but I think if I'm understanding your issue correctly this is a good starting place.

Fade Between Images

I have some code set up to fade between images, and it's not working properly:
The images:
<div id="banner_area">
<img class="active" src= "http://f14.co/automaker-search/assets/images/laptop-Dodge.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Ford.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Honda.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Subaru.png">
</div>
The javascript:
<script>
function cycleImages(){
var $active = $('#banner_area .active');
var $next = ($('#banner_area .active').next().length > 0) ? $('#banner_area .active').next() : $('#banner_area img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){
//fade out the top image
$active.css('z-index',1).show().removeClass('active');
//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#banner_area').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})</script>
The CSS:
#banner_area img { width:714px; height:414px; position:absolute; top:28px; left:55px;top:0;z-index:1}
#banner_area img.active{z-index:3}
Yet all I get is a pile of images, like so: http://f14.co/automaker-search/reno/
I'm guessing I'm way off? I'm really trying to keep it simple. No hover, just an auto rotate.

I would do it like this:
function cycleImages(){
var images = $('#banner_area img'),
now = images.filter(':visible'),
next = now.next().length ? now.next() : images.first(),
speed = 1500;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function() {
setInterval(cycleImages, 7000);
});
FIDDLE

You appear to have a syntax error in the code that is on the page, if you replace the cycleImages function with the one you have above it should start to work.
As an aside, I would write the interval as simply setInterval( cycleImages, 7000 ), and hide any images that are not currently being shown (they seem to "poke out" in the background).

We had some fun accomplishing this with a NodeList:
var nodes = document.querySelectorAll('#banner_area img');
var count = nodes.length;
setInterval(function() {
count -= 1;
if (count > 0) {
$(nodes[count]).fadeOut(1500);
}
else {
count = nodes.length;
$(nodes[count - 1]).fadeIn(1500, function() {
$(nodes).fadeIn(100); // arbitrary speed to outpace next transition
});
}
}, 7000);
:)

Image Carousel script stops after last image. Need it to repeat

I need my script to repeat after the last image is displayed. How can I go about resetting what the script has done then making it play again? The script changes the z-index of the current image. After the last image how can I make the script 'reset' the z-index of all the images and re-run from the top? Thanks!
<script>
function cycleImages(){
var $active = $('#carousel .active');
var $next = ($('#carousel .active').next().length > 0) ? $('#carousel .active').next() : $('#carousel img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
if ($('#carousel .active').next().length > 0) setTimeout('cycleImages()',1000);//check for a next image, and if one exists, call the function recursively
});
}
$(document).ready(function(){
// run every 7s
setTimeout('cycleImages()', 1000);
})
</script>

You don't need to check again if there is a next .active element when setting a new Timeout
use just
setTimeout('cycleImages()',1000);
instead of
if ($('#carousel .active').next().length > 0) setTimeout('cycleImages()',1000);

Simple logic would be to check if the images have reached the end by comparing the .length with the total no of images (full length). if yes then go to first image i.e
('#carousel .active').first()
and call
setTimeout('cycleImages()',1000);
happy coding :)

instead of bringing the next element to front, you can send the active element back by maintaning the counter for z-index, like
<script>
var zCount = 0;
function cycleImages(){
var $active = $('#carousel .active');
var $next = ($('#carousel .active').next().length > 0) ? $('#carousel .active').next() : $('#carousel img:first');
$active.fadeOut(1500, function(){//fade out the top image
$active.css('z-index', --zCount).show().removeClass('active'); //send the active image at the bottom of all images and unhide the image
$next.addClass('active'); //make the next image as active
setTimeout('cycleImages()',1000);
});
}
$(document).ready(function(){
setTimeout('cycleImages()', 1000);
})
</script>

jQueryReplacing images at time intervals

I'm trying to add christmas lights to my logo. I was going to do this in flash but I'm trying to move away from flash so I decided to try it with jQuery.
A quick google search returned this tutorial. Which did a pretty good job getting me on the right track. The problem is that I don't want the images to fade in and out so I replaced
$active.fadeOut(function() $next.fadeIn().addClass('active');
with
$active.show(function() $next.show().addClass('active');
The problem with this is that it only rotates though the images once then stops. I tried using hide instead but it does a weird zoom-out effect.
In short, I have 4 images and i'm trying to cycle though them using this code:
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.show(function(){
$active.removeClass('active');
$next.show().addClass('active');
});
}
$(document).ready(function(){
setInterval('swapImages()', 1000);
})
Html:
<div id="myGallery">
<img src="br_xmas_1.png" class="active" />
<img src="br_xmas_2.png" />
<img src="br_xmas_3.png" />
<img src="br_xmas_4.png" />
</div>
See partly working full code here or not working jsfiddle

Try this;
function swapImages() {
var $current = $('#myGallery img:visible');
var $next = $current.next();
if($next.length === 0) {
$next = $('#myGallery img:first');
}
$current.hide();
$next.show();
}
$(document).ready(function() {
// Run our swapImages() function every 0.5 secs
setInterval(swapImages, 500);
});
Working example
Bonus (Random change)
function swapImages() {
var random = Math.floor(Math.random()*3),
$current = $('#myGallery img:visible');
$current.hide();
if($current.index() == random) {
random = ++random % 4;
}
$('#myGallery img').eq(random).show();
}
$(document).ready(function() {
// Run our swapImages() function every 0.5 secs
setInterval(swapImages, 500);
});

Ah, already answered.
Try this one
You've used show() function which adds display:block style to the element. So, after one run all of the images were displaying at once and the last one was on top of the others so that one was displayed.