Kookie Member
Posts : 12 Join date : 2011-03-09
| Subject: How do I pass variables that change according to class? Sat May 14, 2011 7:37 pm | |
| 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. |
|
Understand Member
Posts : 21 Join date : 2011-03-09
| Subject: Re: How do I pass variables that change according to class? Sat May 14, 2011 7:38 pm | |
| 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>
|
|
Kookie Member
Posts : 12 Join date : 2011-03-09
| Subject: Re: How do I pass variables that change according to class? Sat May 14, 2011 7:38 pm | |
| 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. |
|
Sponsored content
| Subject: Re: How do I pass variables that change according to class? | |
| |
|