Hyperlink on entire image in LofSlider!?

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
eralf
Posts: 67
Joined: Tue 11. Oct 2005, 19:12

Hyperlink on entire image in LofSlider!?

Post 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.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Hyperlink on entire image in LofSlider!?

Post 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.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
eralf
Posts: 67
Joined: Tue 11. Oct 2005, 19:12

Re: Hyperlink on entire image in LofSlider!?

Post 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//-->
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Hyperlink on entire image in LofSlider!?

Post 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>…
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
Post Reply