WebSite X5Help Center

 
John H.
John H.
User

Content Slider Object Pause on Mouseover  en

Autor: John H.
Visitado 965, Followers 1, Compartido 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.

Publicado en
11 RESPUESTAS - 4 úTIL - 1 CORRECTO
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

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

.

ciao

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

... 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>

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

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

... 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

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
John H.
John H.
User
Autor

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.

Leer más
Publicado en de John H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

...!... 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>';

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

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

.....   ↓  .....

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
John H.
John H.
User
Autor

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

Leer más
Publicado en de John H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes PT

... 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...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪