WebSite X5Help Center

 
FABRE Danielle
FABRE Danielle
User

Object Content Slider pictures responsive  en

Auteur : FABRE Danielle
Visité 1018, Followers 2, Partagé 0  

Hello everyone,

I can't find the extra code so that the pictures in the Content Slider object retain their width in the different media like here https://toolsshop.altervista.org/content-slider/responsive.html

I've looked at the various posts about the object, but I haven't found my answer.

Thanks for your help.

Regards,

Danielle

Posté le
16 RéPONSES - 4 UTILE - 1 CORRECT
Giancarlo B.
Giancarlo B.
User

Hi, does the page you posted have the effect on the object you are looking for?

Lire plus
Posté le de Giancarlo B.
FABRE Danielle
FABRE Danielle
User
Auteur

Hi Giancarlo,

Yeees! the pictures retain their size (width) from the largest to the smallest definition embarassed

Lire plus
Posté le de FABRE Danielle
Giancarlo B.
Giancarlo B.
User

well, now the code is the one always present on the page (below) you linked, naturally the cell and row will have to be those of your page, I don't know if I've explained myself.

Lire plus
Posté le de Giancarlo B.
FABRE Danielle
FABRE Danielle
User
Auteur

Thank you for your help!

It's so clear now that I see the extra codes proposed by you and KolaSim... (sorry not to have seen them before coolembarassed) and of course, I will change the breakpoints, the row and the cells.

If I have some problem, I'll come back here very soon, if every is OK, I'll close my post.

Have a nive evening.

kiss

Danielle

Lire plus
Posté le de FABRE Danielle
FABRE Danielle
FABRE Danielle
User
Auteur

Hi Giancarlo,

Many thanks for the code. It's totally correct in my project.

For the moment my code is:

********

<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 2; // secondi di ritardo;
wK = 1920; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 800; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 300); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_1,#imCell_1, #imCell_1 div").css('max-height', CShK);
$(".slide-description").css("font-size","1.5vW"); // x DESCRIZIONE;
}, 0); //K3<<;
} //K2<<;
</script>

******

I just would like that, in a @media screen and (max-width: 1280px), my slide.description will be a little bigger because with the ratio it's look very little...

How to write this addtional line?

Many thanks for you help, if it's possible and if you accept.

Danielle

Lire plus
Posté le de FABRE Danielle
Giancarlo B.
Giancarlo B.
User

Hi Daniele, it's a code from the very kind KolAsim that scales proportionally, if you want you can increase the font-size","1.5vW" part of the code by a value that can be more readable, otherwise, it would be very useful to see the page online and possibly wait for info from KolAsim for this variant.

Alternatively, opt for a different code where you can control the size of the text based on the breakpoint
e.g.: https://www.tribalanimazione.it/

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... maybe I didn't understand, and without LINK I can't evaluate, ... but if you want to make the measurements of the descriptions of Giancarlo's example fixed above 1280 pixels, then you can use this code:

<style>
@media (min-width: 1280px) {
.slide-title { font-size:50px !important }
.slide-description { font-size:45px !important }
.slide-button { font-size:40px !important }
}
</style>

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
FABRE Danielle
FABRE Danielle
User
Auteur

Many thanks Giancarlo and KolAsim.

You help me a lot.

I try and come back after my tests!

Have a nice day kiss

Danielle

Lire plus
Posté le de FABRE Danielle
FABRE Danielle
FABRE Danielle
User
Auteur

Hi KolAsim,

I tested with your code but unfortunately it doesn't works and I think the reason is that the code for the object content slider is written with a <script> (see above my code).

(When I use a code, normally, I use <style> but no <script> which is totally unknown for me...)

Thank you for your help, one more time, if it's possible embarassed

Danielle

Lire plus
Posté le de FABRE Danielle
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

ciao, ... the previous <style> code is based on Giancarlo's example...
... to be able to evaluate what happens in your case, you should post an example of yours online like Giancarlo did...
.
HI, ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
FABRE Danielle
FABRE Danielle
User
Auteur

Hi,

Here is the link

Many, many thanks kiss

Danielle

Lire plus
Posté le de FABRE Danielle
Giancarlo B.
Giancarlo B.
User

wading through the page you left imCell_1 but in your example it is imCell_2

Lire plus
Posté le de Giancarlo B.
FABRE Danielle
FABRE Danielle
User
Auteur

Ok sorry,

I'd deleted the first line! I've put it back! You can refresh the link now embarassed

Danielle

Lire plus
Posté le de FABRE Danielle
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... in your structure the images measure (1600x600)px = ratio (8:3)...
... in your structure the reference selectors are these:
$("#imPageRow_2,#imCell_2, #imCell_2 div")
...
...the code for your current structure is this:
<script>
$( document ).ready(function() {// K>;
/** --- resize ratio x WSx5 ContenSlider by KolAsim --- **/
ritardoK = 1; // secondi di ritardo;
wK = 1600; // larghezza immagine (valore pixel (o rapporto razionale W));
hK = 600; // altezza immagine (valore pixel (o rapporto razionale H));
setTimeout(function(){//K1>;
ridimensionaK();
}, ritardoK * 1000); //K1<<;
}); //K<<;
$(window).on('resize', ridimensionaK);//Kr > | <<
//---------------f K2-----------------------------
function ridimensionaK() {//K2>;
setTimeout(function(){ //K3>;
wwK= window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
ratio=Math.round(wwK/wK*100)/100;
CShK=hK*ratio;
$("#imPageRow_2,#imCell_2, #imCell_2 div").css('max-height', CShK);
$(".slide-description").css("font-size","4vW"); // x DESCRIZIONE;
}, 0); //K3<<;
} //K2<<;
</script>

.

...if you need further clarifications or suggestions, please let us know...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
FABRE Danielle
FABRE Danielle
User
Auteur

It's right for me now!

A huge thank you to you and to you all.

I close my post.

kiss

Danielle

Lire plus
Posté le de FABRE Danielle
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... OK ... ciao ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪