WebSite X5Help Center

 
John H.
John H.
User

Content Slider Object Pause on Mouseover  en

Автор: John H.
Просмотрено 964, Подписчики 1, Размещенный 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.

Размещено
11 Ответы - 4 Полезно - 1 Корректно
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

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

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца 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>

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
John H.
John H.
User
Автор

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.

Читать больше
Размещено От John H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца 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>';

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

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

.....   ↓  .....

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
John H.
John H.
User
Автор

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

Читать больше
Размещено От John H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца 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...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪