Перейти к содержанию
dzimon

Помогите вставить баннер

Рекомендуемые сообщения

Помогите пожалуйста, не могу понять в чем причина, вставляю код в header.tpl он работает только в гугл-хром, а если просто с локалки, то во всех браузерах нормально

вот сам код html

<!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=utf-8" />
<title>Документ без названия</title>
<link href="*.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function() {
	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	//Paging + Slider Function
	rotate = function(){
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
	}; 
	//Rotation + Timing Event
	rotateSwitch = function(){	
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	rotateSwitch(); //Run function on launch
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
});
</script>
<script type="text/javascript">
    $(function() {
        $('.temphol').hover(function() {
            $(this).children('.front').stop().animate({ "top" : '170px'}, 500);   
        }, function() {
            $(this).children('.front').stop().animate({ "top" : '0px'}, 300);       
        });
    });
</script>
</head>
<body>
<div id="banner_block1">
    	<div id="banner_block2">
        	<div class="temp">
        		<div class="temphol">
                  <img src='img/banner_small_down.png' alt='' border='0'/>
                  <img src='img/banner_small1.png' class='front' alt='' border='0'/>
                </div>
        	</div>        	
        </div>
<div id="banner_block3">
    	<div class="main_view">
            <div class="window">
                <div class="image_reel">
                	<a href="#"><img src="img/banner1.png" alt="" /></a>
                  <a href="#"><img src="img/banner2.png" alt="" /></a>
                    <a href="#"><img src="img/banner3.png" alt="" /></a>
                    <a href="#"><img src="img/banner4.png" alt="" /></a>
                </div>
            </div>
            <div class="paging">
                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
                <a href="#" rel="4">4</a>
            </div>
        </div>
</div>
    <div id="banner_block4">
    	<div class="temp">
        	<div class="temphol">
               <img src='img/banner_small_down.png' alt='' border='0'/>
               <img src='img/banner_small1.png' class='front' alt='' border='0'/>
            </div>
        </div>    	
  </div>
</div>
</body>
</html>

и css

#banner_block1 {
	width: 960px;
	height: 140px;
	margin-top: 30px;
	margin: auto auto;
	}
#banner_block2 {
	width: 180px;
	height: 133px;
	float: left;
	}
#banner_block3 {
	width: 575px;
	height: 130px;
	margin: auto auto;
	}
#banner_block4 {
	width: 177px;
	height: 130px;
	float: right;
	margin-top: -136px;
	}
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:130px;	
	width: 575px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
	padding-left: 9px;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 70px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(img/paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold; 
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

/*--------------------------------*/

.temp{
float:left;
width:178px;
}
.temphol{
position:relative;
width:177px;
height:130px;
overflow:hidden;
}
.temphol img {
position: absolute;
top: 0px; left: 0px;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Помогите пожалуйста, не могу понять в чем причина, вставляю код в header.tpl он работает только в гугл-хром, а если просто с локалки, то во всех браузерах нормально

Баннерорезалки не могут мешать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Баннерорезалки не могут мешать?

Вы имеете ввиду дополнения которые блокируют банеры? Нет, я ими никогда не пользовался, дело в том что все картинки выводятся, только такое ощущение что не отрабатывает ява или css, они просто выводятся все как есть на экран вот скрины сделал из хрома post-4570-0-02269100-1305188851_thumb.jpg и оперы post-4570-0-95566200-1305188876_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Проверьте наличие незакрытых тегов.

Как видно хром отображает все как нужно - у него есть функция автозакрытия незакрытых тегов. Может причина в этом.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Проверьте наличие незакрытых тегов.

Как видно хром отображает все как нужно - у него есть функция автозакрытия незакрытых тегов. Может причина в этом.

спасибо, пересчитал дивы, все вроде правильно....и если этот код не вставлять в хоме.тпл то работает и отображается корректно во всех браузерах

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо всем, тему можно закрывать, проблема решена.....решение оказалось банально простым - код css я дописывал в конце и он просто не отрабатывался, когда перенес его в нужное место - все начало адекватно работать!

еще раз всем спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.