Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.

I need to only show one image at a time foreach from=$data

 
Post new topic   Reply to topic    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
jase1
Smarty n00b


Joined: 13 Mar 2018
Posts: 1

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 Pro


Joined: 20 Dec 2011
Posts: 191
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:   
Post new topic   Reply to topic    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