Page 1 of 1
Hyperlink on entire image in LofSlider!?
Posted: Fri 24. Oct 2014, 16:55
by eralf
LofSlider works fine. I use it on more than one site's! (e.g.
http://www.gbsderank.nl)
But I get more and more the request if it is possible that the hyperlink works on the whole image?
It would i.d. very nice if the URL entered in CP Image Splecial affects the entire image.
Does anyone know if this is possible?
It would be a very good addition.
Re: Hyperlink on entire image in LofSlider!?
Posted: Sat 25. Oct 2014, 06:28
by Oliver Georgi
Yes, possible — that is just a question of CSS.
Template section:
Code: Select all
<!--IMAGES_ENTRY_START//-->
<!-- {IMAGE_NAME} -->
<li>
<img src="{IMAGE_REL}"[TITLE] title="{TITLE}"[/TITLE] height="{IMAGE_HEIGHT}" width="{IMAGE_WIDTH}" alt="[ALT]{ALT}[/ALT]" />
<div class="lof-main-item-desc">
[TITLE]<h3>[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<span>{TITLE}</span>[IMAGE_URL]</a>[/IMAGE_URL]</h3>[/TITLE]
{INFOTEXT}
</div>
<div class="lof-nav-item">
<img src="{THUMB_REL}" alt="" />
[TITLE]<h3>{TITLE}</h3>[/TITLE]
{CAPTION}
</div>
</li>
<!--IMAGES_ENTRY_END//-->
Extend CSS:
Code: Select all
.lof-main-item-desc h3,
.lof-main-item-desc h3 a {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 0;
}
.lof-main-item-desc h3 a span {
margin:0;
padding:20px 8px 2px;
font-family:"Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
}
Just a sample, I would do it a bit different, and wrap all in the link and put headline and description text inside. HTML5 can wrap block level elements.
Re: Hyperlink on entire image in LofSlider!?
Posted: Thu 30. Oct 2014, 15:31
by eralf
excellent Oliver,
I need your tip to surround everything with the link.
It works fine!
Code: Select all
<!--IMAGES_ENTRY_START//-->
<all-clicable>
<a href="{URL}">
<!-- {IMAGE_NAME} -->
<li>
<img src="{IMAGE_REL}"[TITLE] title="{TITLE}"[/TITLE] height="{IMAGE_HEIGHT}" width="{IMAGE_WIDTH}" alt="[ALT]{ALT}[/ALT]" />
<div class="lof-main-item-desc">
[TITLE]<h2>{TITLE}</h2>[/TITLE]
{INFOTEXT}
</div>
<div class="lof-nav-item">
<img src="{THUMB_REL}" alt="" /></br></br>
[TITLE]<h2>{TITLE}</h2>[/TITLE]
</div>
</li>
</a>
</all-clicable>
<!--IMAGES_ENTRY_END//-->
Re: Hyperlink on entire image in LofSlider!?
Posted: Thu 30. Oct 2014, 15:47
by Oliver Georgi
That is wrong!
inside the <li> is correct but the outside <a> and <all-clicable> are completely wrong!!! This breaks <ul><li>…