Hyperlink on entire image in LofSlider!?

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

Hyperlink on entire image in LofSlider!?

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

Re: Hyperlink on entire image in LofSlider!?

Postby 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

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

Re: Hyperlink on entire image in LofSlider!?

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

Re: Hyperlink on entire image in LofSlider!?

Postby 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


Return to “phpwcms Support English”

Who is online

Users browsing this forum: Bing [Bot] and 1 guest