Basic Image Viewer with javaScript
Paul
I am new with JavaScript and I am trying to learn by coding. I want to make a basic image viewer with a "next" and a "previous" that you can click to move forwards and back through a gallery of ten pictures. So I have my html, my css and my javaScript files and 10 random pictures to try it out. The files are pretty straight forward:
HTML:
<body>
<div id="wrap">
<div class="firstColumn">
<p>PHOTOGRAPHY</p>
<div class="firstColumnSub">
<p class="photo">SOME TITLE</p>
</div>
</div>
<div class="back">
<p><a href="index.html">BACK</a></p>
</div>
<div id="container">
<div id="controllers">
<div class="buttons" id="previous">
<p onclick="change(-1);">PREVIOUS</p>
</div>
<div class="buttons" id="next">
<p onclick="change(1);">NEXT</p>
</div>
</div>
<div><img height="100%" id="front" src="Image1.jpg"></div>
<div>
<p id="footer">Footer</p>
</div>
</div>
</div>
</body>
Just a few divs with the image in the center and a previous and a next clickable tags. This is what it loos like:
The JavaScript file contains a function that loads the different pitures and -and this is my problem- centers them in the middle of the page by grabbing their width and updating the css:
JavaScript:
window.onload = function setUp() {
var b = document.getElementById("front").width;
document.getElementById("container").style.width = b + "px"
}
var imageCount = 1;
function change(x) {
imageCount = imageCount + x;
var image = document.getElementById('front');
var str1 = "Image";
var str2 = imageCount;
var str3 = ".jpg"
var sum = str1.concat(str2, str3);
image.src = sum;
var a = document.getElementById("front").width;
document.getElementById("container").style.width = a + "px"
}
I an not posting the css unless required, but you get the idea.
As you press "next" or "previous", you are supposed to get this result:
etc... but instead I get all sort of random displays:
And here is the thing that is puzzling me: if you keep clicking "back" and "next", the same pictures appear OK the second time round, so it is working but not immediately. Any help appreciated! Thanks, P.
RandyDaddis
This is most likely a CSS positioning issue. The following CSS may do the job for you. If you need further help, then I suggest that you reconsider posting your CSS to get help.
#container #front
{
position: relative;
/* width: 0px; */ /* set via JS for each element in this use case */
left: 0;
right: 0;
margin: 0 auto;
}
Here is a popular Q & A on this subject which contains a lot of resources.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Why crash when derive from QListWidgetItem AND QObject
- Next: WebDriver isDisplayed() returns true even if the element is hidden
Related
Related Related
- 1
Image viewer without antialiasing
- 2
Simple Image viewer
- 3
pinch zooming in image viewer
- 4
Image viewer/editor with CamanJS
- 5
Open default Image Viewer
- 6
Image Viewer swipe vertically
- 7
BlackBerry - Create image viewer
- 8
Image viewer for multiple images
- 9
Image viewer/ images for buttons
- 10
Image viewer without antialiasing
- 11
Change default image viewer
- 12
Image viewer WebM compatible
- 13
uninstall image viewer
- 14
basic javascript image gallery logic error?
- 15
HighSlide Javascript Thumbnail Viewer
- 16
Reproducing Google image viewer with jQuery
- 17
React-Native Image Viewer?
- 18
Terminal command for gThumb Image Viewer
- 19
Enable the default image viewer on Tumblr
- 20
Image Viewer auto slide codenamone
- 21
Image Viewer - Automatically fill window with image
- 22
Set OpenSeaDragon Viewer Home to "Top" of Image
- 23
Image viewer with auto-reload on file change?
- 24
image viewer syntax issue fileChooser method
- 25
Python: Open multiple images in default image viewer
- 26
How to get an image viewer with JPEG 2000 support?
- 27
Image viewer with auto-reload on file change?
- 28
Command line SVG and image file viewer in Linux?
- 29
Sublime Text 3 internal image viewer
Comments