Joomla Extensions Club 20,483 posts

[majdi2 Friend majdi2Join date: October 2008Posts: 62Downloads:16Uploads:15 Thanks: 2 Thanked: 1 times in 1 posts]

#150794

Hi,

I’m using SlideShow2 and I have set to source from Articles. How do I link the images to their articles. Right now, only the description title is linked to their articles.

Your feedback is appreciated.

Thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#342377

Dear majdi2!

you can put the link for images displaying on the slideshow, but those links do not work, those images were covered by the mask having transparent background.

So that if you would link to images, you must to remove the mask and the module will not look nice as current.?

[majdi2 Friend majdi2Join date: October 2008Posts: 62Downloads:16Uploads:15 Thanks: 2 Thanked: 1 times in 1 posts]

#342414

Thanks tienhc,

Making only the title linkable in the transparent mask is not sufficient, it would be nice to have an option in the settings of SlideShow2 to link images.

After running tests, our users are not easily finding the link to the articles displayed in SlideShow2, is there a way to make the whole transparent background linkable instead of only the title of the article in that display?

Thanks again.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#342610

Dear majdi2!

In your case, you should choose option : display description with reamore link via the module’s configuration. if you choose, the readmore link display near the description , you ‘ll use a background image for the readmore link, i think that users ‘ll find the link in a easy way

Goo dluck

[majdi2 Friend majdi2Join date: October 2008Posts: 62Downloads:16Uploads:15 Thanks: 2 Thanked: 1 times in 1 posts]

#352329

Hi tienhc,

Can you please give us some feedback on modifying the SlideShow2 code to make the image appearing in the slide show linkable to its article. After running user experience test, this seems to be the best option to get to the article.

Thanks again.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#352420

Hi majdi2, I am sorry that modifying the slideshow2 module for linkable image is beyond our scope of instruction at the moment, it requires tweaks in code files. Please consider to add ‘Read more’ link along with description instead. As mentioned in post #4, you can use a background image for the readmore link to make it outstanding. See example Readmore in JA Kyanite.

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#360475

<em>@tienhc 189948 wrote:</em><blockquote>Hi majdi2, I am sorry that modifying the slideshow2 module for linkable image is beyond our scope of instruction at the moment, it requires tweaks in code files. Please consider to add ‘Read more’ link along with description instead. As mentioned in post #4, you can use a background image for the readmore link to make it outstanding. See example Readmore in JA Kyanite.</blockquote>

This is not entirely accurate… you can actually give link functionalities to JA_Slideshow2 without touching a single line of php code.
You can do all modifications through CSS, making the readme link a blank block that spans the area you want to make active.

Attached you can find the active area im using in my site (I could’ve used 100% height and it works perfectly, but just didnt felt like it 🙂 )

Peace,
Gabriel

---

Attachments:

1. 

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#360808

can you show what code you used in the css and which css file? Thanks!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#360861

Dear toymaker!

Can you please share your works ?, it really helpful for many users , please attach css code.

Thanks

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#362282

Sure, no problem…

The files you need to edit, really depend on your template and If this is a specific template styling or it would be the styling you will be using for the component as a default.
If you want this to be specific, make all changes inside template.css (you could make use of an extra class suffix if needed), else do everything inside mod_jaslideshow2.css.

The trick is really making the readmore link cover the area you want to make as “clickable”, but is really simple and its actually a two step mod. Quite easy really…

Step 1.
Make slide-desc cover the whole slide and position the text by padding its interiors… This way you’ll have control over the area you will make active using the readme link.

In my specific case, my slide-desc is outside the slide itself, so I had to use negative values… and play around with z-indexes to avoid the extra padding area covering my Logo link.


#ja-headershow .ja-slide-desc {
color:#FFFFFF;
font-size:10px;
height:85px;
left:-227px;
line-height:11px;
overflow:hidden;
padding:85px 516px 30px 0;
top:0;
width:226px;
}


Step 2.
Span the readme area to cover the slide and position it accordingly…
In my case, I only wanted to cover 81% of the slide’s height… but you can cover 100%, no problem 🙂


#ja-headershow .ja-slide-desc a.readon,
#ja-headershow .ja-slide-desc a.readmore {
background:none;
position:absolute;
bottom:0;
color:#FFFFFF;
display:block;
height:81%;
padding:0;
width:515px;
right:0;
}


And thats about it!
All you need to do now, Is make sure your link has no text inside… just leave it blank.
As I said before, in my specific case, I had to add some z-indexes to make sure, the slide did not cover my Logo link, but thats only because my slide-desc text, is outside the slide itself.

You can take a look at my site… (http://www.toymaker.cl/beta) I recommend you use Firebug to go through the code, so you can play with it a little 🙂

Hope it helps.

Peace,
Gabriel

[Author]

Posts