Canucks 画像 (「情報アーキテクチャとユーザビリティ」の下にあるこの 3 番目のアイコン) をクリックすると、画像が HTML 経由で入力されているにもかかわらず、テキストの横に画像が表示されません。この画像は、div 内にラップされていない限り表示されます。スライドショーであるはずなので、div をラップする必要があります。
これを修正する方法はありますか、それとも div を必要としないスライドショーを作成する方法はありますか?
HTML
<div id="canucksdisplay">
<p>
<button class="closeButton">X</button>
<br>
<br><class id="blueText">You are viewing: Canucks Usability Tests</class><br>Role: Usability Testing<br><br>The Vancouver Canucks is one of Canada's biggest sports teams, with a very strong and avid community. A lot of their community use their website to interact with each other about recent trades, rumours, and debates.
<br>
<br>
I was tasked with testing the usablity of Canucks.NHL.com's community features and social features. This involved in analyzing Canucks' target user and thinking of the potential downfalls the user may have while navigating the website and recording a test participant doing so. These tests ended up being successful in pointing out the uncovered flaws.</p>
<div id="slideshowContainer">
<div class="slideshow">
<img src="images/work/canucks1.png">
<img src="images/work/canucks2.png">
<img src="images/work/canucks3.png">
</div>
<ul id="nav">
<li id="previous"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
CSS
#displays div {
background-image: url(../images/linedpaper.png);
border: 1px dashed black;
display: none;
height: 675px;
overflow: hidden;
}
#displays div p {
display: inline-block;
text-align: left;
width: 35%;
height: 550px;
left: 0 !important;
color: black;
margin-left: 10%;
}
#displays div img {
width: 30%;
display: inline-block;
border: 1px dashed black;
margin: 20px 0 0 10%;
}
#displayedwork {
margin-top: -20px;
}
#displayedwork img {
width: 500px;
display: inline-block;
left: 0 !important;
margin-right: 449px;
}
jQuery
//slideshow
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
});