Develop Reference

memory game how to flip current card with set attribute

I'm making a memory game and trying to flip a card to its image value. when I click on the card it should change the image to the current image in the array but for some reason, it's not working.
JS
var faces = []; //array to store card images
faces[0] = 'images/king-of-diamonds.png';
faces[1] = 'images/king-of-hearts.png';
faces[2] = 'images/queen-of-diamonds.png';
faces[3] = 'images/queen-of-hearts.png';
var cardsInPlay = [];
var checkForMatch = function (cardId) {
if (faces[cardId] === faces[cardId + 1]) {
console.log("You found a match!");
} else {
console.log("Sorry, try again.");
}
}
var flipCard = function (cardId, name) {
document.getElementById('image1')[this].getAttribute("id").src = faces[cardId]
checkForMatch();
}
HTML
<div>
<img onclick="flipCard(1,this)" id="image1" src="images/back.png" alt="Queen of Diamonds">
<img onclick="flipCard(2,this)" id="image1" src="images/back.png" alt="Queen of Hearts">
<img id="image3" src="images/back.png" alt="King of Diamonds">
<img id="image4" src="images/back.png" alt="King of Hearts">
</div>

You should avoid using the same id in different elements. Id is thought to be unique and so you should not have more elements with the same id in the entire page.
At this point you can directly do:
var flipCard = function (cardId, name) {
document.getElementById('image1').src = faces[cardId];
checkForMatch();
}

Changing separate images one at a time with onclick

I'm currently trying to use JavaScript to produce a page with multiple image files that I want to change individually and separately when I click on them. The best way I can to describe it is if you can imagine a set of playing cards face down, and I want to be able to click each one and have it change to a different image, and to be able to click again to change back.
Please see JavaScript and code below that I have done so far. The script works on my first image, but not on any further images.
HTML:
<img id="imgOne" onclick="changeImageOne()" src="click_here.png" height="100" width="100">
<img id="imgTwo" onlick="changeImageTwo()" src="click_here.png" height="100" width="100">
JavaScript:
var changeImageOne = function() {
var imageOne = document.getElementById('imgOne');
if (imageOne.src.match("i.jpg")) {
imageOne.src = "click_here.png";
} else {
imageOne.src = "i.jpg";
}
}
var changeImageTwo = function() {
var imageTwo = document.getElementById('imgTwo');
if (imageTwo.src.match("l.jpg")) {
imageTwo.src = "click_here.png";
} else {
imageTwo.src = "l.jpg";
}
}

typo # onlick, it is onclick
var changeImageOne = function() {
var imageOne = document.getElementById('imgOne');
if (imageOne.src.match("i.jpg")) {
imageOne.src = "click_here.png";
} else {
imageOne.src = "i.jpg";
}
alert(imageOne.src);
}
var changeImageTwo = function() {
var imageTwo = document.getElementById('imgTwo');
if (imageTwo.src.match("l.jpg")) {
imageTwo.src = "click_here.png";
} else {
imageTwo.src = "l.jpg";
}
alert(imageTwo.src);
}
<img id="imgOne" onclick="changeImageOne()" src="click_here.png" height="100" width="100">
<img id="imgTwo" onclick="changeImageTwo()" src="click_here.png" height="100" width="100">

JavaScript :
<script>
function SWAPImage(idv,oldimg,newimg){
document.getElementById(idv).attributes.src.value=newimg;
document.getElementById(idv).attributes["alt-src"].value = oldimg;
}
</script>
HTML :
<img class="image" src="a.jpg" alt-src="a_other.jpg" id="img1" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" />
<img class="image" src="b.jpg" alt-src="b_other.jpg" id="img2" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" />
<img class="image" src="c.jpg" alt-src="c_other.jpg" id="img3" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" />
I used alt-src attribute to store other image on it.When click on any image.It swap src with alt-src.

Filter links by those that do not belong to images

I'm appending a new div to all image links as follows:
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var divLink = document.createElement("div");
divLink.style.position = "absolute";
divLink.style.top = "10px";
divLink.style.right = "10px";
divLink.style.zIndex="1";
divLink.style.fontSize = "20px";
divLink.style.backgroundColor = "black";
divLink.style.color = 'white';
divLink.innerHTML = linkCount;
images[i].parentNode.insertBefore(divLink, images[i] );
}
The above code will add the new divLink attribute to the following HTML:
<li>
<div>
<a title="Free Shipping" href="http://www.url.com/cp/School-Uniforms" onclick="s_objectID="http://www.url.com/cp/School-Uniforms/">
<img width="100" height="100" border="0" src="http://i9.url.com/images/Site/Apparel.jpg" alt="Free Shipping">
</a>
</div>
<div class="cat1">Apparel</div>
<div class="cat2">
<a title="Free Shipping" href="http://www.url.com/cp/School-Uniforms" onclick="s_objectID="http://www.url.com/cp/School-Uniforms">Free Shipping</a>
</div>
</li>
I now need to append a similar element to all the text links that do not belong to an image. I know that I can find all links using:
var links = document.querySelectorAll("a");
How can I separate the links that have images, and only select links that do not belong to an image so that the attribute I'm adding doesn't get added twice to links with images.

Add a class to the non 'image links' Like .standardLink and get them using:
var links = document.querySelectorAll(".standardLink");
Or with jQuery:
var links = $(".standardLink");
And then iterate over the array doing whatever you want with them:
for (i in links){
doSomethingToThisLink(links[i]);
}

jquery trouble - onclick for gallery

I am trying to use image gallery for my website that I found here. I want to add one more functionality to this gallery.. I want a large image to be linked and when clicked on it to open in new tab url that is defined in code.
I have included the full code here:
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to my portfolio';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
});
</script>
And I have 15 thumbnails/photos like this:
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb">
<img alt="" src="images/large/sample1.jpg" class="large_image" rel="Image Sample">
<div class="large_thumb_border"> </div>
<div class="large_thumb_shine"> </div>
</div>
</div>
</div>
<!-- end entry-->
</div>
Any help? Thanks.

This should work, all you have to do is add data-large attributes to each image and on hover it displays a tooltip with the large image inside.
http://jsfiddle.net/DSjLk/

How can I go to the Next and Previous value in a json array?

I've been beating my head against the wall with this one for days now. I have a list of items that when clicked, will move that indivual item to a div. Based on which item is clicked, I'm trying to go the the Next and Previous items in my list (json).
I'm kind of new to this and I just can't quite get this to work no matter what I try.
Here is the jsfiddle code. Thanks!
HTML:
<audio id="audio-player" name="audio-player" src="" ></audio>
<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">NEXT</li>
</ul>
</div>
</a>
<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">PREV</li>
</ul>
</div>
</a>
<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>​​
Javascript an Jquery:
$(document).ready(function(){
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
var $ul = $("<ul></ul>");
$.each(treeObj.root,function(i,v) {
$ul.append(
$("<li></li>").append( $("<a></a>")
.attr({"href":v.id,"data-file":v.trackFile})
.html(v.trackName)
)
);
});
$("#player-handwriting-title").empty().append($ul);
$("#player-handwriting-title a").click(function() {
var name = $(this).html(),
filename = $(this).attr("data-file");
filename2 = "upload-form/upload/" + filename;
$('#player-digital-title').html($(this).html());
document.getElementById('audio-player').src = filename2;
$("#audio-player")[0].play();
return false;
});
var myID = 0;
$("#next-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});
});
​

Added a fiddle
http://jsfiddle.net/kabichill/JzL97/
check out..Hope its wat u expected...

try something like
var myID = 0;
$("#next-bt").click(function() {
myID++;
if(myID > treeObj.root.length) { myID = 0; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
myID--;
if(myID < 0) { myID = treeObj.root.length; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});