How do I pass variables that change according to class?

Member Posts : 12 Join date : 2011-03-09

I have an image gallery that I am building a basic shopping cart for. Basically what I want to accomplish is to pass the value of the image src of the currently selected image to a hidden field and also display this image that is currently selected in the image gallery in the add cart window.

The images are pulled via PHP from a directory.

Hopefully that's not too muddled to understand.

Member Posts : 21 Join date : 2011-03-09

Try this out and see if it's close.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>...</title>
<style type="text/css">

h3 {
margin: 0 0 5px 0;
padding: 0;
font: normal 12px/1 arial, sans-serif;
}

#selection, #cart, #yourForm {
border: 1px solid #333;
padding: 12px;
background: #eee;
margin: 0 0 20px 0;
}

#selection img, #cart #gallery img {
border: 1px solid #333;
margin: 4px;
}

#yourForm input {
width: 90%;
display: block;
}

</style>
</head>
<body>

<div id="selection">
<h3>Add items to your cart</h3>
<img src="http://farm4.static.flickr.com/3145/2431401727_df3c94bf02_t.jpg" alt="" />
<img src="http://farm1.static.flickr.com/78/176018244_f82e7d5e3b_t.jpg" alt="" />
<img src="http://farm3.static.flickr.com/2167/2460883152_49954f0961_t.jpg" alt="" />
<img src="http://farm3.static.flickr.com/2237/2224586968_5270d5725f_t.jpg" alt="" />
<img src="http://farm3.static.flickr.com/2707/4351045597_0a38f961ca_t.jpg" alt="" />
</div>

<div id="cart">
<h3>Items in your cart</h3>
<div id="gallery"></div>
</div>

<form name="yourForm" id="yourForm" action="" method="post">
<h3>This for will be hidden but it's not to show you the inputs are being added</h3>
<div>
</div>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#selection img').live('click', function(){
   var thisSrc = $(this).attr('src');
   $(this).fadeOut(400, function(){
      $(this).remove();
      $('#cart #gallery').append('<img src="'+thisSrc+'" alt="" />');
      $('#yourForm div').append('<input type="text" value="'+thisSrc+'" />');
   });
});
$('#cart #gallery img').live('click', function(){
   var thisSrc = $(this).attr('src');
   $(this).fadeOut(400, function(){
      $(this).remove();
      $('#yourForm div input').each(function(){
         if($(this).val() == thisSrc){
            $(this).remove();
         }
      });
   });
   $('#selection').append('<img src="'+thisSrc+'" />');
});
});
</script>
</body>
</html>

Member Posts : 12 Join date : 2011-03-09

That code works amazingly! I was able to change a few thing to fit the specifics and it works! Thank you so much for your help.

» Change the sk currency name
» Change IP Address in PHP
» Change reputation name
» Reputation name change =>Fame
» Need to change my Name on Facebook ...I'm very irritated

How do I pass variables that change according to class?

How do I pass variables that change according to class?

Similar topics

Similar topics