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 » Fri 24. Oct 2014, 16:55

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: 9482
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Hyperlink on entire image in LofSlider!?

Post by Oliver Georgi » Sat 25. Oct 2014, 06:28

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 | Kleintierpraxis am Georgengarten

eralf
Posts: 67
Joined: Tue 11. Oct 2005, 19:12

Re: Hyperlink on entire image in LofSlider!?

Post by eralf » Thu 30. Oct 2014, 15:31

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: 9482
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Hyperlink on entire image in LofSlider!?

Post by Oliver Georgi » Thu 30. Oct 2014, 15:47

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 | Kleintierpraxis am Georgengarten

Post Reply