WebSite X5Help Center

 
John H.
John H.
User

Content Slider Object Pause on Mouseover  en

Auteur : John H.
Visité 1320, Followers 1, Partagé 0  

Sorry to be a pain, but is there a way to do a Pause on Mouseover on the Content Slider Object.

KolAsim did a great little job on allowing the navigation buttons to permanently be displayed, I hope we can do the same with a pause like on the Logo Slider.

There is a bit to read on some of these items and visitors should not have to move forward and backward all the time.

KolAsim please do your magic here for us. Thanks in advance.

Cheers.

Posté le
11 RéPONSES - 4 UTILE - 1 CORRECT
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois RU

... hello, if you post the LINK of the page online, I can try to evaluate the selector to check...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois RU

... x >>  https://garfieldvictoria.com.au/

<script>
/** pausa Content-Slider x WSx5 by KolAsim **/
$( document ).ready(function() {/**K>**/
secondiPausaK = 30;
pauseK=true;
avvioK();
}); /**K<<**/

function avvioK() {/**K1>**/
calcoloK = setInterval(function(){/**K2>**/
slideK=$('#imObjectContentSlider_805').height();
if(slideK > 100 ) {/**K3>**/
clearInterval(calcoloK); calcoloK = 0;
playK = '<a href="javascript:void(0)" id="play_K" style="position:absolute; top:20px; left:20px; z-index:100000;opacity:0.5"
onclick="play_K()" alt="Slide Play/Stop" title="Play/Stop"> <img id="imgK"
src="https://static.thenounproject.com/png/1578265-200.png" style="background:yellow; border-radius: 50%; border: 2px solid
black; cursor: pointer" width="100" ></a>';
$('#imObjectContentSlider_805').append(playK);
} /**K3<<**/
}, 500); /**K2<<**/
} /**K1<<**/

function play_K() { /**K4>**/
if (pauseK== true) { /**K5>**/
$("#imgK").attr("src","https://static.thenounproject.com/png/1019057-200.png")
x5engine.contentSlider['imObjectContentSlider_805'].autoplay(secondiPausaK * 1000);
pauseK= false
} else {
$("#imgK").attr("src","https://static.thenounproject.com/png/1578265-200.png")
x5engine.contentSlider['imObjectContentSlider_805'].autoplay(3000);
pauseK= true;
} /**K5<<**/
} /**K4<<**/
</script>

..................................

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois RU

... x >> https://garfield.org.au/

<script>
/** pausa Content-Slider x WSx5 by KolAsim **/
$( document ).ready(function() {/**K>**/
secondiPausaK = 30;
pauseK=true;
avvioK();
}); /**K<<**/

function avvioK() {/**K1>**/
calcoloK = setInterval(function(){/**K2>**/
slideK=$('#imObjectContentSlider_808').height();
if(slideK > 100 ) {/**K3>**/
clearInterval(calcoloK); calcoloK = 0;
playK = '<a href="javascript:void(0)" id="play_K" style="position:absolute; top:20px; left:20px; z-index:100000;opacity:0.5"onclick="play_K()" alt="Slide Play/Stop" title="Play/Stop"> <img id="imgK" src="https://static.thenounproject.com/png/1578265-200.png" style="background:yellow; border-radius: 50%; border: 2px solid black; cursor: pointer" width="100" ></a>';
$('#imObjectContentSlider_808').append(playK);
} /**K3<<**/
}, 500); /**K2<<**/
} /**K1<<**/

function play_K() { /**K4>**/
if (pauseK== true) { /**K5>**/
$("#imgK").attr("src","https://static.thenounproject.com/png/1019057-200.png")
x5engine.contentSlider['imObjectContentSlider_808'].autoplay(secondiPausaK * 1000);
pauseK= false
} else {
$("#imgK").attr("src","https://static.thenounproject.com/png/1578265-200.png")
x5engine.contentSlider['imObjectContentSlider_808'].autoplay(3000);
pauseK= true;
} /**K5<<**/
} /**K4<<**/
</script>

.....................................................

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
John H.
John H.
User
Auteur

Thanks KolAsim, I have added the script to the Home Page Properties, Expert, before closing the HEAD tag. In the same spot I added the style to allow for navigation buttons to stay on:

<style>
.arrow-btn .a, .arrow-btn .b, .current-slide-radio-visible {visibility:visible !important }
</style>

below this I pasted your script and uploaded site.

https://garfield.org.au

There doesn't seem to be anything working except for the navigation Buttons staying on.

Am I doing something wrong?

Sorry, back to you.

Cheers.

Lire plus
Posté le de John H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois RU

...!... the string of the playK variable has split into four lines, and instead must be in a single string in a single line without carriage returns:

playK = '<a href="javascript:void(0)" id="play_K" style="position:absolute; top:20px; left:20px; z-index:100000;opacity:0.5"  onclick="play_K()" alt="Slide Play/Stop" title="Play/Stop"> <img id="imgK" src="https://static.thenounproject.com/png/1578265-200.png" style="background:yellow; border-radius: 50%; border: 2px solid black; cursor: pointer" width="100" ></a>';

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois RU

... use the code directly from the "notepad" that I have attached here in TXT ...

.....   ↓  .....

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
John H.
John H.
User
Auteur

KolAsim, you are an absolute legend. It works like a charm now on both sites and I have just changed the color of the background to white. Looks fantastic now and visitors get the chance to pause and read the stories.

Do I need to do anything special if I change the position of the slider on the Home Page? It will always be on the Home Page but I may change the position from time to time.

Once again, my most heartfelt thanks for all the hard work you do for us.

Cheers - John

Lire plus
Posté le de John H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois RU

... I checked, now it's OK ...wink...

... if you use the content slider on different pages, you just have to check the selector ID-name, which in the case of the current HOME is "imObjectContentSlider_808"...
... could change the final part, as happened for the other site:
imObjectContentSlider_808  >> (805)
.
Hello, ciao
.
.................................................
... note: ...you can download the two icons and put them on your site, so you don't depend on slowdowns of external servers...
... in this way you have to correct in the code only with the path relative to the two play-pause icons...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪