Я пытался сделать переходы между изображениями через ссылки. Я попробовал "Демо 6" с этой страницы. Но это не сработало, и я сделал все шаги, показанные на странице руководства. Это ссылка моего сайта для тестирования (danithemes.fanscity.eu/shugar)
Здесь у вас есть код, который я использую (это то же самое с учебной страницы, но на всякий случай...)
КОД CSS:
p#cf7_controls {
text-align:center;
}
#cf7_controls span {
padding-right:2em;
cursor:pointer;
}
#cf7 {
position:relative;
height:281px;
width:450px;
margin:0 auto 10px;
}
#cf7 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#cf7 img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
}
HTML-код
<div id="cf7" class="shadow">
<img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
JS CODE
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7 img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7 img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
Мой вопрос: что я делаю неправильно? Спасибо огромное!
Проблема здесь в вашем HTML-коде:
<div id="cf7" class="shadow">
<img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
Вы используете одно и то же изображение " http://css3.bradshawenterprises.com/images/Birdman.jpg ", что не имеет смысла, и вы не увидите изменения, просто измените путь других изображений.
<div id="cf7" class="shadow">
<img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
<img src="http://css3.bradshawenterprises.com/images/X.jpg;" />
<img src="http://css3.bradshawenterprises.com/images/Y.jpg;" />
<img src="http://css3.bradshawenterprises.com/images/Z.jpg;" />
</div>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
Вам нужно будет включить эту строку в раздел HTML head.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Смотрите это в прямом эфире.
@Abdelrahman имеет правильный ответ. Вам просто нужно использовать другие изображения, кроме изображения вашего птица. Я сделал jsfiddle, который использует одно и то же изображение, но различную ширину: http://jsfiddle.net/lsubirana/uzxt21yh/
<div id="cf7" class="shadow">
<img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" width="350" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" width="250" />
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" width="150" />
</div>
;
из контуров изображений.