Ошибка при затухании изображения со ссылками

Question

Я пытался сделать переходы между изображениями по ссылкам. Я попробовал «Демо 6» от this. Но это не сработало, и я сделал все шаги, показанные на странице руководства. Это соединение моего сайта тестирования (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 КОД

<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> 

Мой вопрос: Что я делаю неправильно? Большое вам спасибо!

Answer 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> 

Вы используете один и тот же образ «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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Посмотри это LIVE.

Answer 2

@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>