[Resolved] slideshow using W3. CSS Slideshow

[Author]

Posts

[bhk-2]

I am trying to implemente slideshow using W3.CSS Slideshow.

I visited this URL: hidden link

I expected to see my post like the above article but I don't understand the javascript code in the article.

I used the above javascript code in the js editor of my content template.

Instead, I got: hidden link

Is it possible to modify the code used in the reference to the code used in the js editor of my content template?

[Luo Yang]

Dear bhk,

You are using custom JS codes, which is out the range of Toolset:
https://toolset.com/toolset-support-policy/

And I checked the problem URL:
hidden link
There is a JS error:
Uncaught TypeError: Cannot read property 'style' of undefined

I suggest you check out our certified partners for it:
https://toolset.com/consultant/

[bhk-2]

I am sorry you cannot help me.
I thought I could get help because I need to modify the code below to insert it into the js editor in my content template.

 
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script> 

Please review again to see if you can help.

Thanks.

[Luo Yang]

The problem is not in the JS codes, it is in the HTML codes, you will need to add CSS class name "mySlides" into each html a tag for images, for example:

...
<a href="<em><u>hidden link</u></em>" class="mySlides"><img src="<em><u>hidden link</u></em>" alt="20160204 124320 1" width="4128" height="2322"></a>
      <a href="<em><u>hidden link</u></em>" class="mySlides"><img src="<em><u>hidden link</u></em>" alt="20160204 124517 1" width="4128" height="2322"></a>
      <a href="<em><u>hidden link</u></em>" class="mySlides"><img src="<em><u>hidden link</u></em>" alt="20160204 124517 1" width="4128" height="2322"></a>
...

[bhk-2]

Here is my template code for my images.

 
 <div class="w3-content w3-display-container">
      [types field='representative-photo' class="mySlides" width='400' height='300' resize="crop"][/types]
      [types field='photo1' class="mySlides" width='400' height='300' resize="crop"][/types]
      [types field='photo1' class="mySlides" width='400' height='300' resize="crop"][/types]
       <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a>
     </div>

And the code I inserted into the js editor.

 
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

I want to know what's wrong with my approach.

Thanks.

[Luo Yang]

Please check our document:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
attributes (html):alt | class | style | title
HTML attributes all take string values and will be added unchanged to the img element.

The class attribute is added into the HTML "img" element, but you need to add it into HTML "a" tag, so I suggest you manually setup the HTML a tag, for example:

<a href="[types field='representative-photo' output='raw'][/types]" class="mySlides">[types field='representative-photo' url="true" width='400' height='300' resize="crop"][/types]</a>

[bhk-2]

Your code outputs the same result.
In this article, https://toolset.com/documentation/customizing-sites-using-php/functions/#image

 
[types field="my-image" alt="blue bird" title="Acme logo" class="my-class1 myclass2" style="border:1px solid black;padding:20px" size="thumbnail"]

Will output

 
<img alt="blue bird" title="Acme logo" class="my-class1 myclass2" style="border:1px solid black;padding:20px" src="<em><u>hidden link</u></em>" />

Your code and my code seem to output same results.
Why does not your code work with JavaScript code?
Thanks.

[Luo Yang]

Since it is a custom codes problem, I need to test and debug it in a live website, please provide the credentials of your website in below private detail box. thanks

[Luo Yang]

I tried the credentials you provided, but seems it is not valid, I get this error message:
에러: 유효하지 않은 이메일 주소입니다. 비밀번호를 잃어버렸나요?

Please check it:
https://toolset.com/forums/topic/slideshow-using-w3-css-slideshow/#post-471195

[bhk-2]

My Information is correct

[bhk-2]

Username or email address : bhk-2
This username is logged in but can not read my posts.

[Luo Yang]

I assume the login URL address is:
hidden link
I just test again with both username and email address, both are not valid, see screenshot: 11.JPG

If you can check it, and confirm it works, that will help us to find the problem a lot.

[bhk-2]

Sorry.
I need Private message form.

[Luo Yang]

The "private detail box" enabled again, thanks

[Luo Yang]

Thanks for the details, I have modified the codes as below：

     <div class="w3-content w3-display-container">
     <div class="mySlides">[types field='representative-photo' width='400' height='300' resize="crop"][/types]</div>
     <div class="mySlides">[types field='photo1' width='400' height='300' resize="crop"][/types]</div>
    <div class="mySlides"> [types field='photo1' width='400' height='300' resize="crop"][/types]</div>
       
       <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a>
  <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a>
     </div>

Since you are using custom URL fields, so the attributes width, height and resize will not take any effect, see our document:
https://toolset.com/documentation/customizing-sites-using-php/functions/#url