• Как отобразить картинку по клику на элемент js?

    @dimkanio
    Вот код с этого сайта:

    //<![CDATA[
        jQuery.preloadImages = function()
    {
      for(var i = 0; i<arguments.length; i++)
      {
        jQuery("<img>").attr("src", arguments[i]);
      }
    }
    
    $.preloadImages(
    "http://ecohome.by/images/home/1-2.png",
    "http://ecohome.by/images/home/1-3.png",
    "http://ecohome.by/images/home/1-4.png",
    "http://ecohome.by/images/home/1-5.png",
    "http://ecohome.by/images/home/1-6.png"
    );
    //]]>
    
    $(document).ready(function () {
    	$("#range_01").ionRangeSlider({
    	    grid: true,
    	    from: 0,
    	    values: [
    	        "180", "200",
    	        "220", "240",
    	        "260", "280",
    	        "300", "320"
    	    ]
    	});
    	$("#range_02").ionRangeSlider({
    	    grid: true,
    	    from: 0,
    	    values: [
    	        "140x160", "140x180",
    	        "140x200", "140x230",
    	        "160x200", "180x230"
    	    ]
    	});
    	$("#range_03").ionRangeSlider({
    	    grid: true,
    	    from:0,
    	    values: [
    	        "160x160", "160x180",
    	        "160x200"
    	    ]
    	});
    	$("#range_04").ionRangeSlider({
    	    grid: true,
    	    from:0,
    	    values: [
    	        "160x160", "160x180",
    	        "160x200"
    	    ]
    	});
    	
    	$('input.range_type_home').change(function() {
    		$(this).closest('div').find('input').prop("checked", true);
    	});
    	
    	$('#email_double').keyup(function(){
    		$('#construct_form input[name="email"]').val( $(this).val() );
    	});
    	$('#email_double').change(function(){
    		$('#construct_form input[name="email"]').val( $(this).val() );
    	});
    	
    	$('input#lenght').numeric();
    });


    и вот

    $(document).ready(setupConstruct);
    
    function setupConstruct()
    {
    	$("#construct_form input:radio").change(
    		function(){
    			cleanConstructArea();
    
      			// при смене дома убираем всe еэлементы
      			var allCheckboxes = $("#checkboxes input:checkbox:enabled");
      			allCheckboxes.removeAttr('checked');
    
      			// находим номер дома
    			var n_radio = "";
      			var n_radio1 = $('form :radio.type_home:checked').data('val');
      			var n_radio2 = $('form :radio.level:checked').data('val');
      			if((n_radio1 == 1 || n_radio1 == 3) && n_radio2 == 1) {
    				n_radio = 1;
    				$("#balkon").css("display","inline");// убираем балконы у домов, где их нет
    		  	}
    		  	if((n_radio1 == 1 || n_radio1 == 3) && (n_radio2 == 2 || n_radio2 == 3)) {
    				n_radio = 1;
    				$("#balkon").css("display","inline");// добавляем балкон дому, где он есть
    		  	}
    		  	if((n_radio1 == 2 || n_radio1 == 4) && n_radio2 == 1) {
    				n_radio = 1;
    				$("#balkon").css("display","inline");// убираем балконы у домов, где их нет
    		  	}
    		  	if((n_radio1 == 2 || n_radio1 == 4) && (n_radio2 == 2 || n_radio2 == 3)) {
    				n_radio = 1;
    				$("#balkon").css("display","inline");// добавляем балкон дому, где он есть
    		  	}
    		  	
    
    		  	// присваием элементам новые родители
    		  	$("#checkboxes input:checkbox").each(
    		  		function(){
    					var n_check = $(this).val();
    					var n_check_array = n_check.split('-');
    					var new_check_val = n_radio+'-'+n_check_array[1];
    					$(this).val(new_check_val);
    				}
    			);
    
    		    // начинаем сменять изображение
    		    //if(n_radio2 == 1 || n_radio2 == 2)
    		    if(n_radio2)
    		    {
    		    	var path = $(this).val();
    
    				var slide = '';
    				$('#construct_image').append(slide).find(".loading").fadeIn(1000);
    				$('#construct_image').find('.new').remove();
    				$('#construct_image').children('img').addClass("hide");
    				var img = '<img class="new" src="http://ecohome.by/images/home/'+n_radio+'-1.png" alt="" />';
    				$('#construct_image').prepend(img).find('img.new').bind(
    					'load',
    					function() {
    						$('#construct_image .loading').stop().remove();
    						$('#construct_image').children('img.hide').fadeOut('slow', function(){$(this).remove();});
    						$(this).removeClass('new');
    					}
    				);
    			}
    			return true;
    		}
    	);
    
    	// прибавление элементов
    	$("#construct_form #checkboxes input:checkbox").click(
    		
    		function(){
    			var checkIt = $(this).prop("checked");
    			var el_name = $(this).val();
    			if (checkIt == true)
    			{	
                	var el_name = $(this).val();
    				var slide = '';
    				$('#construct_image').append(slide).find(".loading").fadeIn(1000);
    				var blockImg  = '<div class="construct_detail" id="'+el_name+'">';
    					blockImg += '<img class="new" src="http://ecohome.by/images/home/'+el_name+'.png" alt="" />';
    					blockImg += '</div>';
    				$("#construct_image").prepend(blockImg).find('.construct_detail img').bind(
    					"load",
    					function(){
    						$("#construct_image .loading").stop().remove();
    					}
    				);
    			}
    			else
    			{
                    var el_name = $(this).val();
    				$("#"+el_name).remove();
    			}
    			checkIt = false;
    			el_name = "";
    			return true;
    		}
    	);
    
    }
    
    function cleanConstructArea()
    {
    	$("#construct_image div").each(
    		function(){$(this).remove();}
    	);
    }
    Ответ написан
    1 комментарий