Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How do I pass variables that change according to class?

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •