Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.
  www.smarty.net   •  phpinsider.com  •  Forum Index  •  FAQ  •  Search  •  Memberlist  •  Profile  •  Log in to check your private messages  •  Register  •  Log in
I need to only show one image at a time foreach from=$data

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
jase1
Smarty n00b


Joined: 13 Mar 2018
Posts: 4
PostPosted: Tue Mar 13, 2018 5:55 am    Post subject: I need to only show one image at a time foreach from=$data Reply with quote
Hi all,
I have an issue I need help with, I am looking to use this sliding image galley code below as I only require one image to be shown at a time. It works ok when I click on the next or prev arrows, but on the initial page load it shows all the images.

Is there any way of not showing all the images on page load?

Thank you
Jason.

Code:
{if $viewphotos=="Y"}
{if $data<>""}
{literal}<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>{/literal}
<table width="90%">
<tr>
<td valign="top">
<p>&nbsp;</p>
{* This the image display portion *}
{if $viewphotos=="Y"}
{if $data<>""} <div align="center">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)" style="font-size:30px;">❮</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)" style="font-size:30px;">❯</button><p></p>
{foreach from=$data item="entry"}
<img class="mySlides" src="photos/{$entry.image}"border="0" width="100%"/><br />
<div class="text"><b>{$entry.title}</b></div><p></p>
{/foreach}
</div>
</td>
</tr>
</table>
{/if}
{/if}
Back to top
View user's profile Send private message
bsmither
Smarty Elite


Joined: 20 Dec 2011
Posts: 322
Location: West Coast
PostPosted: Tue Mar 13, 2018 6:55 pm    Post subject: Reply with quote
I think Smarty is not the thing that will help you solve this.

I think the trick will be to code the <img> tags to be invisible. Don't have javascript do it for you. Then, when the page and it's resources finally completely load, there will be javascript to make each image visible in turn.
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> General All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP