|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
jase1 Smarty n00b
Joined: 13 Mar 2018 Posts: 4
|
Posted: Tue Mar 13, 2018 5:55 am Post subject: I need to only show one image at a time foreach from=$data |
|
|
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> </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>
<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 |
|
bsmither Smarty Elite
Joined: 20 Dec 2011 Posts: 322 Location: West Coast
|
Posted: Tue Mar 13, 2018 6:55 pm Post subject: |
|
|
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 |
|
|
|
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
|