Why doesn't the gallery work? - javascript

Hi I'm trying to make a simple JS image viewer all it needs to do is change the image source for my mainImage to the source of an image I click on from the gallery. for some reason it doesn't work any ideas? I just left the css in that is necessary for you to view the gallery that's why it looks a bit crazy. When I paste the code in here and click on the image it gives me an error which I'm guessing is the problem. Also ignore the fact that the link for the jscript is missing as I just put it inline to rule out that it just wasn't comminucation properly.
Any help would be greatly appreciated.
here's a link to the page as it stands now it's in very early dev so it's not very good http://stevengamedev.com/page5.html
#charset "utf-8";
/* CSS Document */
#containerImg{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#Gallery{
width:100%;
position: fixed;
top: 0px;
bottom: 0px;
z-index: -7;
background-color:;
}
#padding{
width:25%;
height:100%;
background-color:;
float: left;
}
#padding2{
width:18.75%;
height:100%;
background-color: ;
float: left;
}
#boundry{
background-color: ;
width:50%;
right: 0px;
height: 100%;
float: left;
margin-left: auto;
align-content: center;
}
#mainImage{
float:left;
width: 90%;
height: auto;
margin-left: 10%;
margin-top: 10%;
margin-right: auto;
background-color:rgba(0,0,0,0.65) ;
align-content: center;
}
#imagedescription{
color: white;
}
#contentcontainerimage{
width:75%;
margin-left: 25%;
height:100%;
z-index: 2;
float: left;
overflow-y: auto;
background-color: ;
z-index: inherit;
}
#Gallerybounds{
float: left;
height: auto;
z-index: inherit;
}
#Imagebounds{
float:left;
width: 25%;
height: 100%;
padding-left: ;
z-index: inherit;
background-color: rgba(0,0,0,0.50);
}
#Imagebounds img{
margin-left: 5%;
}
.gallery{
}
.imgStyle{
margin:auto;
align-content: center;
margin-bottom: 20px;
float: left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css"/>
<link rel="stylesheet" type="text/css" href="Image.css"/>
<link type="text/javascript" href=""/>
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="images/softwares/nav.png">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="Gallery">
<div id="padding"></div>
<div id="padding2"></div>
<div id="boundry">
<div id="mainImage"><img id ="mainImg" src="images/background/bridge4.jpg" alt="bridge" width="100%" height="auto">
<div id="imagedescription">
<h1>description!</h1>
<a>this is a description of the picture etc! lots more words need more words words words words words words.</a>
</div>
</div>
</div>
</div>
<div id="containerImg">
<div id="contentcontainerimage">
<div id="Gallerybounds">
<div id="Imagebounds" onClick="changeImage(event)">
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/Blog/help6.png" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
<img src="images/background/bridge4.jpg" width="90%" height="auto"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function changeImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == IMG){
document.getElementById("mainImg").src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>


Try wrapping IMG in either double or single quotation marks so the if statement condition reads:
if (targetElement.tagName == 'img') {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}

Related

Image drag glitchy on mobile

I've built a quick block which allows someone to zoom in on an image and then drag (pan and zoom).
To do this, I have used panzoom:
jQuery(document).ready(function( $ ) {
$("#panzoom").panzoom({
$zoomRange: $(".zoom-range"),
$reset: $(".reset"),
contain: 'invert',
});
});
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
The above works fine on desktop. But on mobile, since the user users the screen to scroll, when trying to drag the image across, it "stutters".
Difficult to explain, best demo'd on an actual device.
Any ideas on what the issue is here?

Use this library instead, it's more stable
// just grab a DOM element
const element = document.querySelector('.wrap');
// And pass it to panzoom
panzoom(element);
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src='https://unpkg.com/panzoom#8.7.3/dist/panzoom.min.js'></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>

Unable to an element

find bellow code (HTML/CSS) that I´m trying to move a specific DIV but not able to - note that I used Bootstrap
HTML - The issue is with the div id "PlayerMain" that is unable to move to the page center
body {
background-image: url('../images/dis_bg.png');
background-repeat: no-repeat;
text-align: center;
align-content: center;
}
.whiteBorder {
display: inline;
background-color: white;
}
.allPage {
text-align: center;
}
.blueFont {
color: blue;
}
#efi {
max-width: 100%;
height: auto;
display: block;
position: absolute;
bottom: 20%;
top: 20%;
right: 10%;
z-index: 30;
}
.h1Border {
width: 1500px;
background-color: white;
border: none;
}
.loginButtonImg {
margin-top: 10px;
}
.loginButtonImg:hover {
cursor: pointer;
}
#media (max-width: 768px) {
.mobile-only {
display: none !important;
}
}
<script src="SCRIPT/JS/site.js"></script>
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/site.css" rel="stylesheet" />
<script src="SCRIPT/Jquery/jquery-3.1.1.js"></script>
<script src="SCRIPT/JS/site.js"></script>
<script src="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<div class="container-fluid">
<div class="row whiteBorder">
<section class="col-xs-12">
<div>
<h1 class="blueFont">דודי,<br /> text, <br /><b>text</b>text</h1>
</div>
</section>
<section class="col-xs-12">
<div>
<img src="images/efi.png" id="efi" class="mobile-only center-block" />
<div id="treepodiaPlayerMain" class="center-block"></div>
</div>
<img src="images/login.png" class="img-responsive center-block loginButtonImg" />
</section>
</div>
<section class="row">
<div class="col-xs-12">
<img src="images/bottom_icons.png" class="img-responsive center-block" />
</div>
</section>
</div>
<script type="text/javascript" src="//someScript.js"></script>
Many thanks in advance!

I show you snippet just remove position: absolute; from css where you write id #efi. and check it again

Saving Annotorius annotation data from Image Slider to mySQL via php

I need help getting anotation values from Annotorius Library. I have a ton of code (too much to post) for annotating images in a slider. Now I need to grab the annotation data (position, size and comment) to post to my server (php and mySQL).
Could anyone post some sample code that I can learn from?

If I'm not misunderstanding. the data you looking for is:
- position: x, y
- size: width, height
- comment: the annotation text
try this:
var datapost = new Array();
//loop all annotation
anno.getAnnotations().forEach(function(element){
var details = '==============================================================\n';
details += '\n image : ' + element.src;
details += '\n comment : ' + element.text;
var geometry = element.shapes[0].geometry;
var imgObj = new Image();
imgObj.src = element.src;
//get position and size by pixel
var position_x = Math.round(imgObj.width * geometry.x);
var position_y = Math.round(imgObj.height * geometry.y);
var size_width = Math.round(imgObj.width * geometry.width);
var size_height = Math.round(imgObj.height * geometry.height);
details += '\n position_x : ' + position_x;
details += '\n position_y : ' + position_y;
details += '\n width : ' + size_width;
details += '\n height : ' + size_height;
console.log(details);
//add data to post
datapost.push({
'image' : element.src,
'position_x' : position_x,
'position_y' : position_y,
'width' : size_width,
'height' : size_height,
'comment' : element.text
});
});
//post data to the server here
console.log(datapost);

After a lot of R&D , I can not get my answer . Now i have use jssor slider of jquery and https://annotorious.github.io/index.html library. Complete code is shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link type="text/css" rel="stylesheet" href="http://annotorious.github.com/latest/annotorious.css" />
<script type="text/javascript" src="js/annotorious.min.js"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript"></script>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:helvetica, arial, verdana, sans-serif">
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 01 css *//*.jssort01-99-66 .p (normal).jssort01-99-66 .p:hover (normal mouseover).jssort01-99-66 .p.pav (active).jssort01-99-66 .p.pdn (mousedown)*/.jssort01-99-66 .p { position: absolute; top: 0; left: 0; width: 99px; height: 66px;}.jssort01-99-66 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}.jssort01-99-66 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}.jssort01-99-66 .c { position: absolute; top: 0px; left: 0px; width: 95px; height: 62px; border: #000 2px solid; box-sizing: content-box; background: url('img/t01.png') -800px -800px no-repeat; _background: none;}.jssort01-99-66 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 95px; height: 62px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%;}.jssort01-99-66 .p:hover .c { top: 0px; left: 0px; width: 97px; height: 64px; border: #fff 1px solid; background-position: 50% 50%;}.jssort01-99-66 .p.pdn .c { background-position: 50% 50%; width: 95px; height: 62px; border: #000 2px solid;}* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c { /* ie quirks mode adjust */ width /**/: 99px; height /**/: 66px;}
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
<div data-p="150.00">
<img data-u="image" src="img/01.jpg" />
<img data-u="thumb" src="img/thumb-01.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/02.jpg" />
<img data-u="thumb" src="img/thumb-02.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/03.jpg" />
<img data-u="thumb" src="img/thumb-03.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/04.jpg" />
<img data-u="thumb" src="img/thumb-04.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/05.jpg" />
<img data-u="thumb" src="img/thumb-05.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/06.jpg" />
<img data-u="thumb" src="img/thumb-06.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/07.jpg" />
<img data-u="thumb" src="img/thumb-07.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/08.jpg" />
<img data-u="thumb" src="img/thumb-08.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/09.jpg" />
<img data-u="thumb" src="img/thumb-09.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/10.jpg" />
<img data-u="thumb" src="img/thumb-10.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/11.jpg" />
<img data-u="thumb" src="img/thumb-11.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/12.jpg" />
<img data-u="thumb" src="img/thumb-12.jpg" />
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Image Gallery with Vertical Thumbnail</a>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/13.jpg" />
<img data-u="thumb" src="img/thumb-13.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/14.jpg" />
<img data-u="thumb" src="img/thumb-14.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;" class="mainrelated">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:0px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_SlideshowTransitions = [
{$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
];
var jssor_1_options = {
$AutoPlay: false,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Rows: 2,
$Cols: 6,
$SpacingX: 14,
$SpacingY: 12,
$Orientation: 2,
$Align: 156
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 960);
refSize = Math.max(refSize, 300);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
// $xx= 0;
// setInterval(function(){
// if($xx==0){
$("#jssor_1").find('img').each(function(index){
$(this).attr('id','myyyyid'+index);
$mainid = $(this).attr('id');
anno.makeAnnotatable(document.getElementById($mainid));
});
// }
// }, 2000);
/*responsive code end*/
});
</script>
</body>
</html>
Complete html+jquery script of slider and annotation . You just copy and paste the code and run on browser. May be it will usefull for you.

Simple gallery loading all pictures when opened for a first time

I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}

You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }

You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}

How do i add an image in a div?

I need to insert a image to be zoom in and out but some website told me that it is suppose to be use with path="image url". The image didn't appear so i want to use background-image: url("image url"). So how do i put it in to allow image to show?
<style type="text/css">
#html{
height:100%;
}
#body{
height:100%;
margin:0px;
padding:0px;
}
#hr{
border:0;
width:50%;
}
</style>
<body>
<div id="outerDiv0">
<div id="outerDiv" style="position:relative;height:99%;width:100%;border:1px solid black;overflow:hidden;">
<div style="position: absolute; top: 10px; left: 10px; z-index: 1">
<img src="zoomin_off.gif"
onclick="ZoomIn()" alt="zoomin"/>
</div>
<div style="position: absolute; top: 10px; left: 90px; z-index: 1">
<img src="zoomout_off.gif"
onclick="ZoomOut()" alt="zoomout"/>
</div>
<div id="Nav" style="display:none;position: absolute; top: 70px; left: 20px; z-index: 1"><div><img src="prev.gif" alt="prev"/></div>
<div style="position: absolute; top: 0px; left: 79px;"><img src="next.gif" alt="next"/></div></div>
<div id="imageTiles" style="position:relative;top:0;left:0;z-index:0;width:100%;"></div>
<div id="imageLabels" style="position:relative;top:0;left:0;z-index:1;width:900000px;height:900000px;"></div>
</div>
<div id="overlay"><div id="theScale"></div><div id="theInfo">
</div>
<div id="Thumb0"><div id="Thumb"></div><div id="Thumb2"></div></div>
</div>
<div id="wheelMode">Mouse Wheel:<input type="radio" onclick="wheelMode1()" /> Zoom<input type="radio" onclick="wheelMode2()" /> Next/Prev</div>
<div id="coords" style="position:absolute;top:2px;right:10px;z-index:10;"></div>
</div>

Without any example code we can only guess. Maybe your div did not have any dimensions. Try adding width and height with css to your div:
<div style="width:300px;height:300px;background:url('http://webpage/path/to/image.jpg')"></div>

Can you try this,
CSS:
.Bg{
width:300px;
height:300px;
background-image:url('imagepath');
}
HTML:
<div class='Bg'></div>

Its hard to understand what exactly you want to do,however if you want to add background image to div you can do it as follows
<div class="show">
some text
</div>
in CSS
.show
{
background-image:url('paper.gif');
//other css properties of div
}
ref

Categories