Hyperlink on entire image in LofSlider!?

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

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

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

[Oliver Georgi]

That is wrong!

inside the <li> is correct but the outside <a> and <all-clicable> are completely wrong!!! This breaks <ul><li>…