Joomla Templates Club 406,261 posts

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#190698

I would like to put the custom html for each image in JA Slideshow lite underneath the image when it is at mobile size.

1st option – modify existing css
I made an attempt at this but I couldn’t get it to work. It might be an easy solution with someone with more css knowledge!

2nd option – create another custom html module that is only visible when mobile and hook it up to the slider so that it changes when the image changes.
I just don’t know how to make it so that the html changes with the image from a seperate module.

3rd option – open to suggestions!

Any help or links to posts/tuts is greatly appreciated. 🙂

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#506310

Hi magneticeye,

Truly, you will need to work with both css and jQuery to get your requirement since the Custom HTML modules won’t automatically slide according to the slide images with only css. So that, in this case, i suggest you to hire an experienced developer to help you handling this customization task.

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#506593

Hi Leo,

So I decided I would just hide the slideshow using this:

@media (max-width: 479px) {
.ja-ss-items {
display: none ;
}
}

From some recent reading on responsive images it would seem that display:none would still load all of the images for the mobile.
Is there a way to hide JA Slideshow without it loading the images?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#506654

Hi magneticeye,

You can use your codes above with hiding the slideshow item class or try these:

@media (max-width: 479px) {
#ja_slideshow_lite {
display: none;
}
}

They are both effective.

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#506957

Hey Leo,

So I used the network tab in developer tools to see what is downloaded and both #ja_slideshow_lite and .ja-ss-items only hide JA Slideshow lite and the images for it are still downloaded.

From what I have read the css display: none; only hides the images and doesn’t stop the browser from downloading an image.

Is there another way other than using css to stop JA Slideshow from loading?
Maybe this is one for the dev team of JA Slideshow lite.

I also have another suggestion for the JA Slideshow lite dev team, it would be great if you could have different size images for different devices so that mobiles don’t have to download large images that you get on your desktop.

🙂

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#506983

Hi magneticeye,

<blockquote>Is there another way other than using css to stop JA Slideshow from loading?</blockquote>
I think we can. But actually, it is related to customizing our module so that it will be better that i should discuss with our dev team on this new updated setting before giving you the concrete confirmation. And thank you for your suggestion above, i will transfer to our dev team also.

1 user says Thank You to phong nam for this useful post

1. Mark Kennedy

[Author]

Posts