I have this JQuery image presentation and for some reason I cant get an ancor tag to work on the images.
This is my page: http://orhsfoundation.com/Trial
I don’t know if these are needed but here you go
HTML:
<div id="allinone_bannerWithPlaylist_easy" style="; ; display: none;background-color: #03F;">
<!-- IMAGES -->
<a href="about.html"><img src="Assets/Images/01_easyPlaylist.jpg" alt="" data-title="Lorem Ipsum Dolor1" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit " border="0" /></a>
<img src="Assets/Images/02_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />
<img src="Assets/Images/03_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti " data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend." />
<img src="Assets/Images/04_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum." />
<img src="Assets/Images/05_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" />
<img src="Assets/Images/06_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />
<img src="Assets/Images/01_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-title="Lorem Ipsum Dolor1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit " />
<img src="Assets/Images/02_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />
<img src="Assets/Images/03_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti " data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend." />
<img src="Assets/Images/04_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum." />
<img src="Assets/Images/05_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" />
<img src="Assets/Images/06_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />
<!-- TEXTS -->
<div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textbg_easy" data-initial-left="0" data-initial-top="100" data-final-left="-50" data-final-top="320" data-duration="0.5" data-fade-start="0" data-delay="0">
<div class="textElement11_easy">Up to 5 types of banners</div>
<div class="textElement12_easy">Each with multiple SKINS</div></div>
</div>
<div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement21_easy" data-initial-left="80" data-initial-top="50" data-final-left="30" data-final-top="30" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects for images</div>
<div class="allinone_bannerWithPlaylist_text_line textElement22_easy" data-initial-left="280" data-initial-top="80" data-final-left="30" data-final-top="90" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition for each image</div>
</div>
<div id="allinone_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement31_easy" data-initial-left="0" data-initial-top="50" data-final-left="40" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
<div class="allinone_bannerWithPlaylist_text_line textElement32_easy" data-initial-left="0" data-initial-top="90" data-final-left="40" data-final-top="66" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
<div class="allinone_bannerWithPlaylist_text_line textElement33_easy" data-initial-left="0" data-initial-top="200" data-final-left="40" data-final-top="101" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
</div>
<div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textbg_easy" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="287" data-duration="0.5" data-fade-start="0" data-delay="0">
<div class="textElement41_easy">Lorem <a href="http://codecanyon.net/user/LambertGroup" target="_blank">Ipsum</a> Dolor Sit Amet</div>
<div class="textElement42_easy">Consectetur Adiscipit</div></div>
</div>
<div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts">
<div class="allinone_bannerWithPlaylist_text_line textElement51_easy" data-initial-left="30" data-initial-top="0" data-final-left="30" data-final-top="270" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
<div class="allinone_bannerWithPlaylist_text_line textElement52_easy" data-initial-left="30" data-initial-top="384" data-final-left="30" data-final-top="250" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
</div>
CSS(with some edited out):
.allinone_bannerWithPlaylistBorder {
position:relative;
}
/* the container */
.allinone_bannerWithPlaylist {
position:relative;
}
.allinone_bannerWithPlaylist img {
position:absolute;
top:0px;
left:0px;
max-width:100%;
max-height:100%;
}
.allinone_bannerWithPlaylist .stripe {
position:absolute;
display:block;
height:100%;
z-index:1;
}
.allinone_bannerWithPlaylist .block {
position:absolute;
display:block;
z-index:1;
}
/***ELEGANT SKIN***/
.allinone_bannerWithPlaylist.elegant .bannerControls {
position:absolute;
left:0;
top:0;
z-index:2;
}
.allinone_bannerWithPlaylist.elegant .leftNav {
position:absolute;
left:0px;
top:50%;
margin-top:-35px; /* height/2 */
width:31px;
height:71px;
background:url(leftNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_bannerWithPlaylist.elegant .leftNav:hover {
background:url(leftNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.elegant .rightNav {
position:absolute;
right:0px;
top:50%;
margin-top:-35px; /* height/2 */
width:31px;
height:71px;
background:url(rightNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_bannerWithPlaylist.elegant .rightNav:hover {
background:url(rightNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolderWrapper {
position:absolute;
background:#e9e9e9;
/*height:121px;
width:100%;*/
height:100%;
overflow:hidden;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolderVisibleWrapper {
position:absolute;
/*width:100%;
height:121px;*/
height:100%;
overflow:hidden;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder {
position:absolute;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF {
display:block;
height:110px;
background:#cfcfcf;
text-align:left;
line-height:1.4em;
cursor: pointer;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .padding {
padding:10px;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .title {
font: bold 13px 'Droid Sans', sans-serif;
color:#000;
display:inline-block;
padding-bottom:5px;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .reg {
font: 11px Arial, sans-serif;
color:#000;
line-height:1.4em;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF img {
position:relative;
float:left;
margin-right:10px;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON {
background:#611731;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON .title {
color:#ff771c;
}
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON .reg {
color:#FFF;
}
/* scroller start */
.allinone_bannerWithPlaylist.elegant .slider-vertical {
display:none;
position:absolute;
width:6px;
}
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider { position: relative;}
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 25px; cursor: pointer; background:url(scrollerFaceOFF.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-handle:hover { background:url(scrollerFaceON.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical { width: 6px; height: 100px; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -25px;; border: 0; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; }
/* Component containers
----------------------------------*/
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-widget-content { xbackground: #FF0000; }
.allinone_bannerWithPlaylist.elegant .slider-vertical .ui-widget-header { xbackground: #0000cc; }
/* Corner radius */
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-corner-all {}
/* Interaction states
----------------------------------
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-state-default {background: #000000; }
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-state-hover { background: #FFF000; }
*/
/* scroller end */
/***EASY SKIN***/
.allinone_bannerWithPlaylist.easy .bannerControls {
position:absolute;
left:0;
top:0;
z-index:2;
}
.allinone_bannerWithPlaylist.easy .leftNav {
position:absolute;
left:5px;
top:50%;
margin-top:-35px; /* height/2 */
width:41px;
height:41px;
background:url(Assets/Images/Banner/skins/easy/leftNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_bannerWithPlaylist.easy .leftNav:hover {
background:url(Assets/Images/Banner/skins/easy/leftNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.easy .rightNav {
position:absolute;
right:5px;
top:50%;
margin-top:-35px; /* height/2 */
width:41px;
height:41px;
background:url(Assets/Images/Banner/skins/easy/rightNavOFF.png) 0 0 no-repeat;
cursor: pointer;
}
.allinone_bannerWithPlaylist.easy .rightNav:hover {
background:url(Assets/Images/Banner/skins/easy/rightNavON.png) 0 0 no-repeat;
}
.allinone_bannerWithPlaylist.easy .thumbsHolderWrapper {
position:absolute;
background:#e9e9e9;
height:100%;
overflow:hidden;
width:100%;
}
.allinone_bannerWithPlaylist.easy .thumbsHolderVisibleWrapper {
position:absolute;
height:100%;
overflow:hidden;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder {
position:absolute;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF {
display:block;
height:96px;
background:url(Assets/Images/Banner/skins/easy/bgPlaylistUnit.png) top left repeat-x;
text-align:left;
line-height:1.4em;
cursor: pointer;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .padding {
padding:10px;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .title {
font: bold 13px 'Droid Sans', sans-serif;
color:#000;
display:inline-block;
padding-bottom:5px;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .reg {
font: 11px Arial, sans-serif;
color:#000;
line-height:1.4em;
}
/****
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF img {
position:relative;
float:left;
margin-right:10px;
}/****/
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON {
/*background: #611731 url(skins/easy/thumbActiveArrow.png) -3px 0px no-repeat;*/
background: #611731;
z-index:4;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON .title {
color:#ff771c;
}
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON .reg {
color:#FFF;
}
/* scroller start */
.allinone_bannerWithPlaylist.easy .slider-vertical {
display:none;
position:absolute;
width:6px;
}
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider { position: relative;}
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 25px; cursor: pointer; background:url(Assets/Images/Banner/skins/easy/scrollerFaceOFF.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-handle:hover { background:url(Assets/Images/Banner/skins/easy/scrollerFaceON.png) 0 0 no-repeat; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical { width: 6px; height: 100px; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -25px;; border: 0; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; }
/* Component containers
----------------------------------*/
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-widget-content { xbackground: #FF0000; }
.allinone_bannerWithPlaylist.easy .slider-vertical .ui-widget-header { xbackground: #0000cc; }
/* Corner radius */
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-corner-all {}
/***EASY TEXTS***/
.textbg_easy {
width:690px;
background:url(Assets/Images/Banner/skins/easy/textBg_transparency.png);
padding:5px 10px 5px 10px;
}
.textElement11_easy {
font: bold 24px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:0px 10px 3px 10px;
color:#ffffff;
}
.textElement12_easy {
font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:0px 10px 3px 10px;
color:#ffffff;
}
.textElement21_easy {
width:265px;
background:#512d5d;
font: bold 22px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:5px 10px 5px 10px;
color:#ffffff;
}
.textElement22_easy {
width:240px;
background:#611731;
font: bold 14px 'Droid Sans', Verdana, Helvetica, sans-serif;
padding:7px 10px 7px 10px;
color:#ffffff;
}
.textElement31_easy {
background:#d61d1d;
font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:5px 10px 5px 10px;
color:#ffffff;
}
.textElement32_easy {
background:#ffffff;
font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
padding:7px 10px 7px 10px;
color:#000000;
}
.textElement33_easy {
background:#000000;
font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
padding:7px 10px 7px 10px;
color:#ffffff;
}
.textElement41_easy {
font: bold 24px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:0px 10px 3px 10px;
color:#ffffff;
}
.textElement41_easy a {
text-decoration:none;
color:#ff771c;
}
.textElement41_easy a:hover {
color:#c1dd56;
}
.textElement42_easy {
font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:0px 10px 3px 10px;
color:#ffffff;
}
.textElement51_easy {
font: bold 38px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:6px 15px 6px 15px;
color:#000000;
}
.textElement52_easy {
font: bold 20px 'Droid Sans', Verdana, Helvetica, sans-serif;
text-transform:uppercase;
padding:6px 15px 6px 15px;
color:#000000;
}
.textElement_easy {
background:#512d5d;
padding:10px;
color:#FFF;
}
.textElement2_easy {
background:#FF0000;
padding:10px;
color:#FFF;
}
.allinone_bannerWithPlaylist_texts {
position:absolute;
z-index:3;
display:none;
width:100%;
text-align:left;
}
.allinone_bannerWithPlaylist_text_line {
position:absolute;
}
.hideElement {
display:none;
}
Looking briefly at your allinone_bannerWithPlaylist.js file. It looks like it’s generating the slide show by stripping out the src attribute of your image tag and setting that as a background-image for a series of divs it creates. So your image isn’t being linked because your image (that you put in in the HTML) isn’t what is actually being displayed. That behavior is what allows for the columns in the “blinds-esque” transition.
That’s your answer. My suggestion for a fix is to find a different jquery slideshow plugin that might better fit your needs. You may lose the columned transition, but you’ll gain your links.