最大化されたブラウザーで Web サイトを開くたびに、ページが表示され、スライド イメージが適切に機能します。ただし、ブラウザを最小化して再度最大化すると、スライド イメージが別の場所に移動します。
この問題を解決するには、どのような変更を加える必要がありますか?
HTML
'<html dir="ltr" lang="<?php echo $document->language; ?>">
<head>
<jdoc:include type="head" />
<!--scroling head-->
<script src="<?php echo $templateUrl; ?>/js/scroling.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
<!--end scroling-->
<?php if ($slider_enabled == 1) { ?> <!--animacja-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/s3Slider.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<!--end animacja--></script><?php } ?>
<?php if ($slider_enabled == 1) { ?> <!--animacja grafika-->
<div class="dd-object1780082794" data-left="61.13%"> <div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href=""><img src="<?php echo $this->params->get('foto1'); ?>" alt="1" /></a>
<span class=""><strong></strong></span></li>
<li class="slider1Image">
<a href=""><img src="<?php echo $this->params->get('foto2'); ?>" alt="2" /></a>
<span class=""><strong></strong></span></li>
<li class="slider1Image">
</ul>
</div></div>
<!--konec animacja grafika--><?php } ?>
<div class="dd-object2048865207" data-left="59.09%"></div>
<div class="dd-object295555565" data-left="1.31%"></div>
</div>
<h1 class="dd-headline" data-left="0.76%">
<a href="<?php echo $document->baseurl; ?>/"><?php echo $this->params- >get('siteTitle'); ?></a>
</h1>
<h2 class="dd-slogan" data-left="0.75%"><?php echo $this->params->get('siteSlogan'); ?> </h2>
<?php if ($fc == 1) { ?><div class="dd-textblock dd-textblock-932844776" data- left="0%">
<div class="dd-textblock-932844776-text-container">
<div class="dd-textblock-932844776-text"> <a href="<?php echo $this->params- >get('facebook'); ?>" target="_blank" class="dd-facebook-tag-icon"></a> </div>
</div><?php } ?>
<?php if ($tc== 1) { ?></div><div class="dd-textblock dd-textblock-718872902" data- left="0%">
<div class="dd-textblock-718872902-text-container">
<div class="dd-textblock-718872902-text"> <a href="<?php echo $this->params- >get('twitter'); ?>/" target="_blank" class="dd-twitter-tag-icon"></a> </div>
</div><?php } ?>
<?php if ($rc== 1) { ?></div><div class="dd-textblock dd-textblock-203272383" data- left="0%">
<div class="dd-textblock-203272383-text-container">
<div class="dd-textblock-203272383-text"> <a href="<?php echo $this->params- >get('rss'); ?>" class="dd-rss-tag-icon"></a> </div>
</div><?php } ?>
</div>`
CSS
.dd-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}
.dd-slider-inner
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.dd-slidenavigator > a
{
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}
.dd-slidenavigator > a:last-child
{
margin-right: 0 !important;
}
div.item-page .panel .pane-slider
{
margin: 0;
padding: 0;
}
#slider1 {
width: 942px; /* important to be same as image width */
height: 276px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 12px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.slider1Image span strong {
font-size: 16px;
}
'