We Keep Coding

Jquery set attribute to every element

I want to set attribute of every a tag as img tag's src.
Here is what I did.
$(document).ready(function() {
var href=$('.single img').attr('src');
$('.single').attr('href',href);
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single" >
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
But every a tag has same href.
How can I fix this

You can use attr() with callback, which iterate over the elements and update the attribute by getting children img attribute value
$(document).ready(function() {
$('.single').attr('href', function() { // iterate over a tag
return $(this)
.find('img') // get children img
.attr('src') // get arc attribute
});
$(".single").fancybox({
helpers: {
title: {
type: 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>

You should go through all of the images and assign it one by one (That's using your own code).
You can do something like:
$(document).ready(function() {
$(".single img").each(function() {
var href=$(this).attr('src');
$(this).parent().attr('href',href);
})
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})

Function not loading quickly enough

I have an each function that determines when a link is clicked within an ID. Once the click has happened, it takes the relevant attributes and associates them to the main image.
This functionality can also include a video, so if the html contains an id called #video it takes the video attribute and sticks it in the predefined <video>.
When you first initially load the everything and quickly click on the number 5, the overlay of the elevateZoom happens on top of video. Even thought i have a if statement that determines it.
What would be the best way to overcome this on when a user clicks it very quickly.
Trial it here: http://s.codepen.io/jagmitg/debug/jPXzzz?
Actual codepen: http://codepen.io/jagmitg/pen/jPXzzz
$('#product-gallery-super').children().click(function(e) {
e.preventDefault();
var prodImg = $(this).attr('data-image');
var imgSrc = $(this).children().attr('src')
var vidCheck = false;
var mainImg = $('.main-image');
if (imgSrc != 'http://yi.yoga/images/cs.jpg') {
$(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");
if ($(this).attr('id') == 'video') {
$('.main-image').hide();
if (!$('.product-video').hasClass('product-video')) {
var videoLink = $(this).attr('href');
var videoImg = $(this).find('img').attr('src');
var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100px" height="100px"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video> <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>';
$('.container').prepend(video);
// START VIDEO FUNCTION videoInitate();
}
} else {
mainDestroy()
$('.video-container').remove();
$('.main-image').show();
$('.main-image').attr('src', prodImg);
$('.product-zoom').elevateZoom({
cursor: 'pointer',
zoomType: "window",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750,
responsive: true,
borderSize: 1,
borderColour: '#DDDDDD',
lensBorder: 1,
lensSize: 200,
scrollZoom: false,
zoomWindowFadeOut: 1,
});
}
}
});
function mainDestroy() {
$('.zoomContainer').remove();
$('.product-zoom').removeData('elevateZoom');
$('.product-zoom').removeData('zoomImage');
}
.active-thumbnail {
display: inline-block;
border: 1px solid black;
}
#product-gallery-super img {
width: 61px;
height: 79px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
<img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">
<div id="product-gallery-super">
<a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
<img src="http://yi.yoga/images/cs.jpg">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>

calling rel for anchor from JavaScript file?

I have an asp.net file which call an JS file
the problem is
when I call anchor property from aspx page it displayed correctly
but when I tried to call it from js file it works false
my code as
aspx page
<ul id="gallery_id">
<li class="first">
<img src="images/demo/gallery/1.jpg" alt="Title Text" /></li>
<li><a href="images/demo/gallery/2.jpg" rel="prettyPhoto[gallery1]" title="Image 1">
<img src="images/demo/gallery/2.jpg" alt="Title Text" /></a></li>
<li><a href="images/demo/gallery/3.jpg" rel="prettyPhoto[gallery1]" title="Image 2">
<img src="images/demo/gallery/3.jpg" alt="Title Text" /></a></li>
<li><a href="images/demo/gallery/4.jpg" rel="prettyPhoto[gallery1]" title="Image 3">
<img src="images/demo/gallery/4.jpg" alt="Title Text" /></a></li>
<li><a href="images/demo/gallery/572x330.gif" rel="prettyPhoto[gallery1]" title="Image 4">
<img src="images/demo/gallery/174x150.gif" alt="Title Text" /></a></li>
</ul>
when I tried to call it dynamically from js file
as
function view_gallery(response) {
if (response != null) {
for (var i = 0; i < response.length; i++) {
if (i == 0) {
$('#gallery_id').append($('<li id=\"' + response[i].image_guid + '\" class=\"first\" > ' +
'<img src=\"../images/demo/gallery/' + response[i].image_location + '\" alt=\"' + response[i].image_location + '\" /></li>'));
}
else {
$('#gallery_id').append($('<li id=\"' + response[i].image_guid + '\">' +
' <a href=\"../images/demo/gallery/' + response[i].image_location+'"'
+ ' rel=\"prettyPhoto[gallery1]\" title=\"Image 1\">' +
' <img src=\"../images/demo/gallery/' + response[i].image_location
+ '\" alt=\"Title Text\" /></a></li>'));
}
my asp plugins are:
<script type="text/javascript" src="layout/scripts/jquery.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.defaultvalue.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#fullname, #validemail, #message").defaultvalue("Full Name", "Email Address", "Message");
$('#shout a').click(function () {
var to = $(this).attr('href');
$.scrollTo(to, 1200);
return false;
});
$('a.topOfPage').click(function () {
$.scrollTo(0, 1200);
return false;
});
$("#tabcontainer").tabs({
event: "click"
});
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'dark_rounded'
});
});
</script>
<!-- prettyPhoto -->
<link rel="stylesheet" href="layout/scripts/prettyphoto/prettyPhoto.css" type="text/css" />
<script type="text/javascript" src="layout/scripts/prettyphoto/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'dark_rounded',
overlay_gallery: false,
social_tools: false
});
});
</script>
<script type="text/javascript" src="javascript/gallery.js"></script>
it displayed images but ignores value in rel of anchor element
please help

How do I make a direct call to a Menu item from the content?

I have this code, it works for a rotating menu that is obviously a ul> li> Menu.
What I would like to know is how to trigger (onClick, HRef, etc.) the function for a specific list item such as rot7.
I would like to click a line of text and fire the function, is this possible?
Example "Click here to go there" ,
Kinda like the old days -- {a href="some.html"}Click Here{/a} page loads.
In this case I want the text to open the 7th li> menu item using the form and function of the JQuery script.
There, clear as Mud.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bridgett's Electrolysis</title>
<!-- Favorite Icon --><link rel="shortcut icon" href="images/beLogoColor3D.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
}
#content{
margin:150px auto 10px auto;
}
.reference{
clear:both;
width:800px;
margin:30px auto;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
<script type="text/javascript">
// EDITED
$(function () {
$('#link6').click(function () {
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
</head>
<body>
<div class="logoback">
<div id="logo">
<img src="images/beWebLogoColor3D.png" height="250">
</div>
</div>
<div id="content">
<div class="rotator">
<div class="myh">STOP TWEEZING UNWANTED HAIR.....FOREVER!!!</div>
<ul id="rotmenu">
<li>
Home
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Relax</div>
<div class="info_description">
<div class="myh1">Eliminate Unwanted Hair</div><br />
<div class="col2"><img src="images/page1_img1.png" alt="" width="90%"></div>
<div class="col2">
<span class="myh2">Safe, Permanent Hair Removal<br />
<br />
Electrolysis is:</span><br />
<span class="myh3home">• Still the only true permanent hair removal method and the only
permanent treatment recognized by the FDA<br />
• An excellent solution for those discouraged by the unsuccessful results of temporary
hair removal methods<br />
• For everyone<br />
• The preferred treatment for combating folliculitis<br />
<br />
</span>
</div>
<div id="mycenter" class="myh2"><a id="link6" href="javascript:;">Book now to schedule your Complimentary Consultation</a>
</div>
</div>
</div>
</li>
<li>
News
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">The Scoop</div>
<div class="info_description">
<div class="col1">
<img src="images/page2_img1.jpg" alt="" />
<img src="images/appointment-request1.png" width="60%" alt="" />
<img src="images/page2_img3.jpg" alt="" />
</div>
<div class="col3">
<div class="mytabs">Open at our new Location!</div>
<span class="myh3">See our Location Section for a Map or Directions.</span><br /><br /><br /><br />
<div class="mytabs">Online Appointment Booking is Now Available!</div>
<span class="myh3">Go to our Appointments Section and schedule your appointment today.</span><br /><br /><br /><br />
<div class="mytabs">All New Equipment!</div>
<span class="myh3">The latest and greatest equipment has been installed to offer you the most comfortable Electrolysis experience.</span>
</div>
</div>
</div>
</li>
<li>
Services
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Here to Serve You</div>
<div class="info_description">
<span class="mytabs">Electrolysis</span><br />
<span class="myh3">These are the areas that Electrolysis can be performed on.</span><br />
<img src="images/areas.png" / width="100%" height="350">
</div>
</div>
</li>
<li>
Location
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">Come and Visit</div>
<div class="info_description">
<span class="mytabs">1003 E. Broad St. Mansfield TX 76063</span>
<iframe width="100%" height="355px" seamless="seamless" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1003+E+Broad+St,+Mansfield,+TX&aq=2&oq=1003+E+Broad&sll=32.800447,-97.289319&sspn=0.966172,1.783905&t=m&ie=UTF8&hq=&hnear=1003+E+Broad+St,+Mansfield,+Texas+76063&ll=32.565228,-97.130527&spn=0.007568,0.013937&z=14&output=embed">
</iframe>
<br />
</div>
</div>
</li>
<li>
Contact Us
<div style="display:none;">
<div class="info_image">5.png</div>
<div class="info_heading">Get in Touch</div>
<div class="info_description">
<div class="col1">
<span class="mytabs">Contact Info:</span><br />
<span class="myh3">Bridgett's Electrolysis<br />
1003 E. Broad St<br />
Mansfield, TX. 76063<br />
Phone:(817)879-7817<br />
email: <a href="mailto:bridgettselectro#gmail.com?subject=Info Request from your site">
bridgettselectro#gmail.com</a><br />
</span>
</div>
<div class="col3">
</div>
</div>
</div>
</li>
<li>
FAQ
<div style="display:none;">
<div class="info_image">6.png</div>
<div class="info_heading">Electrolysis Questions?</div>
<div class="info_description">
<Iframe src="faq/faq.htm" width="100%" height="400" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
Appointment
<div style="display:none;">
<div class="info_image">book.jpg</div>
<div class="info_heading">Book It</div>
<div class="info_description">
<Iframe src="webappt/index.php" width="100%" height="405" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
FaceBook
<div style="display:none;">
<div class="info_image">like.png</div>
<div class="info_heading">Coment or Like Us</div>
<div class="info_description">
<div class="mycenter"><span class="myh2">Be Sure to Visit our FaceBook FanPage for deals and coupons!</span></div>
<div class="col2">
<div class="fb-like", data-href="http://www.bridgettselectro.com" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark" data-font="arial"></div>
</div>
<div class="col2">
<div class="fb-comments" data-href="https://www.facebook.com/BridgettsElectrolysis?fref=ts" data-num-posts="10" data-width="350" data-colorscheme="dark"></div>
</div>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/atooltip.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var current = 1;
var iterate = function () {
var i = parseInt(current + 1);
var lis = $('#rotmenu').children('li').size();
if (i > lis) i = 1;
display($('#rotmenu li:nth-child(' + i + ')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate, 3000000);
$('#rotmenu li').bind('click', function (e) {
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem) {
var $this = elem;
var repeat = false;
if (current == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
$(this).animate({ 'opacity': '0.7' }, 700);
});
current = parseInt($this.index() + 1);
var elem = $('a', $this);
elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);
var info_elem = elem.next();
$('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot1 .description').animate({ 'bottom': '-425px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '1200').attr('height', '500')
);
}
});
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>

<a id="link6" href="javascript:;">click to open menu 6</a>
<script>
// EDITED
$(function() {
$('#link6').click(function(){
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
EDIT:
The code above will not work because each time the menu is changing pages sets the container (.description) content with the original tags get upon initialization, so the page content including our a tag is overriden by a the original content which is same as previous one, but overrides the old one and that's why the click handler doesn't work - because it was set on an item which is overriden.
To not set the click handler each time when the menu changes the pages it should be bind into the link as simple as taht: <a onclick="$('#rotmenu li:nth-child(6)').click();" href="javascript:;">Book now to schedule your Complimentary Consultation</a>.
That's it - works fine.

Simplify my jQuery code, which is growing huge and redundant

I am no jQuery expert, but I'm learning. I'm using a bit (growing to a LOT) of jQuery to hide some images and show a single image when a thumb is clicked. While this bit of jQuery works, it's horribly inefficient but I am unsure of how to simplify this to something that works on more of a universal level.
<script>
$(document).ready(function () {
// Changing the Materials
$("a#shirtred").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtRed").addClass("visible");
});
$("a#shirtgrey").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGrey").addClass("visible");
});
$("a#shirtgreen").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGreen").addClass("visible");
});
$("a#shirtblue").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtBlue").addClass("visible");
});
// Changing the Collars
$("a#collarred").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarRed").addClass("visible");
});
$("a#collargrey").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGrey").addClass("visible");
});
$("a#collargreen").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGreen").addClass("visible");
});
$("a#collarblue").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarBlue").addClass("visible");
});
// Changing the Cuffs
$("a#cuffred").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffRed").addClass("visible");
});
$("a#cuffgrey").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffGrey").addClass("visible");
});
$("a#cuffblue").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffBlue").addClass("visible");
});
$("a#cuffgreen").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffGreen").addClass("visible");
});
// Changing the Pockets
$("a#pocketred").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketRed").addClass("visible");
});
$("a#pocketgrey").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketGrey").addClass("visible");
});
$("a#pocketblue").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketBlue").addClass("visible");
});
$("a#pocketgreen").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketGreen").addClass("visible");
});
});
</scrip>
<!-- Thumbnails which can be clicked on to toggle the larger preview image -->
<div class="materials">
<img src="/grey_shirt.png" height="122" width="122" />
<img src="red_shirt.png" height="122" width="122" />
<img src="hblue_shirt.png" height="122" width="122" />
<img src="green_shirt.png" height="122" width="122" />
</div>
<div class="collars">
<img src="grey_collar.png" height="122" width="122" />
<img src="red_collar.png" height="122" width="122" />
<img src="blue_collar.png" height="122" width="122" />
<img src="green_collar.png" height="122" width="122" />
</div>
<div class="cuffs">
<img src="grey_cuff.png" height="122" width="122" />
<img src="red_cuff.png" height="122" width="122" />
<img src="blue_cuff.png" height="122" width="122" />
<img src="/green_cuff.png" height="122" width="122" />
</div>
<div class="pockets">
<img src="grey_pocket.png" height="122" width="122" />
<img src=".png" height="122" width="122" />
<img src="blue_pocket.png" height="122" width="122" />
<img src="green_pocket.png" height="122" width="122" />
</div>
<!-- The larger images where one from each set should be viewable at one time, triggered by the thumb clicked above -->
<div class="selectionimg">
<div id="selectShirt">
<img src="grey_shirt.png" height="250" width="250" class="selectShirtGrey show" />
<img src="red_shirt.png" height="250" width="250" class="selectShirtRed hide" />
<img src="blue_shirt.png" height="250" width="250" class="selectShirtBlue hide" />
<img src="green_shirt.png" height="250" width="250" class="selectShirtGreen hide" /> </div>
<div id="selectCollar">
<img src="grey_collar.png" height="250" width="250" class="selectCollarGrey show" />
<img src="red_collar.png" height="250" width="250" class="selectCollarRed hide" />
<img src="blue_collar.png" height="250" width="250" class="selectCollarBlue hide" />
<img src="green_collar.png" height="250" width="250" class="selectCollarGreen hide" /> </div>
<div id="selectCuff">
<img src="grey_cuff.png" height="250" width="250" class="selectCuffGrey show" />
<img src="red_cuff.png" height="250" width="250" class="selectCuffRed hide" />
<img src="blue_cuff.png" height="250" width="250" class="selectCuffBlue hide" />
<img src="green_cuff.png" height="250" width="250" class="selectCuffGreen hide" /> </div>
<div id="selectPocket">
<img src="grey_pocket.png" height="250" width="250" class="selectPocketGrey show" />
<img src="hred_pocket.png" height="250" width="250" class="selectPocketRed hide" />
<img src="blue_pocket.png" height="250" width="250" class="selectPocketBlue hide" />
<img src="green_pocket.png" height="250" width="250" class="selectPocketGreen hide" />
</div> </div>

$("a[color]").each(function() {
$(this).click(function () {
var color = $(this).attr('color');
$("#selectCuff img").removeClass("visible");
$("img[color="+color+"]").addClass("visible");
});
});
like that?
Also you can play with context css classes like that
#select img {
display:none;
}
#select.red img.red{
display:inline;
}
and add/remove color class on #select div
I've just realize that you don't even need 'each' here
$("a[color]").click(function() {
var color = $(this).attr('color');
$("#selectCuff img").removeClass("visible");
$("img[color="+color+"]").addClass("visible");
});
in markup
show grey
<div id="select">
<img src="grey_collar.png" height="250" width="250" color="grey" />
<img src="red_collar.png" height="250" width="250" color="red" />
</div>

You could do something like this? (check for corrct case etc..not tested)
<script>
function setupMaterialsClick(name)
{
$("a#" + name).click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.select" + name).addClass("visible");
});
}
$(document).ready(function ()
{
// Changing the Materials
setupMaterialsClick("shirtred");
// etc
// Other bits
});
});
</script>

Change your classes to match the case of the ids of the links, then do something like:
$('materials a').bind(changeSelection);
$('collars a').bind(changeSelection);
$('cuffs a').bind(changeSelection);
$('pockets a').bind(changeSelection);
function changeSelection()
{
var id = $(this).attr('id');
var selectClass = 'img.select'+id;
$("#selectPocket img").removeClass("visible");
$(selectClass).addClass("visible");
}

$("a").each(function() {
$(this).click(function() {
var src = $(this).children("img").attr("src");
var img = $(".selectionimg").find("img[src$='"+src+"']");
img.addClass("visible").siblings().removeClass("visible");
return false;
});
});
This assumes, that the selected images are the same src as the corresponding clickable images.

I haven't had a chance to test this with images, but you can shorten your HTML and script as follows:
$(document).ready(function(){
/* names in the materials variable must match the image file name */
/* the script will form the filename as follows: grey_shirt.png */
var materials = {
'shirt' : ["grey", "red", "blue", "green"],
'collar' : ["grey", "red", "blue", "green"],
'cuff' : ["grey", "red", "blue", "green"],
'pocket' : ["grey", "red", "blue", "green"]
}
/* Set up Content */
var i, c = '', s = '<div class="selectionimg">';
$.each(materials, function(key, value){
c += '<div class="' + key + '">';
s += '<div class="select' + key + '">';
for (i=0; i<value.length; i++) {
c += '<img class="thumb" src="' + value[i] + '_' + key + '.png">';
s += '<img src="' + value[i] + '_' + key + '.png" height="250" width="250" class="large-img select' + value[i];
s += (i==0) ? ' show" />' : ' hide" />'; // add show class only the first selection
}
c += '</div>';
s += '</div>';
})
$('#content').html(c + s + '</div>');
/* Set up scripting */
$('#content a').click(function(){
var type = $(this).parent().attr('class');
var color = $(this).attr('rel');
$('.select' + type).find('img').removeClass('visible').end()
.find('img.select' + color).addClass('visible');
return false;
})
})