Code not running using array.push - javascript

HTML :
<html>
<head>
<script>pushImages();</script>
<title>Float Image Gallery</title>
</head>
<body>
<button onclick="showAllGalleries();">Show gallery</button>
<div class="gallery">
<div class="gallery-close">
<a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
</div>
<div class="gallery-content">
<!-- Whenever need to add a image, add this code :
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
-->
<!--
Information :
When adding photo that is not 1:1, it will force shrink to 1:1.
-->
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
</div>
</div>
</body>
</html>
CSS :
<style>
.gallery {
display:none;
width:100%;
height:100%;
left:0;
bottom:0;
top:auto;
right:auto;
position:fixed;
background-color:#cccccc;
opacity:50%;
overflow-y: scroll;
}
.gallery-close {
width:auto;
height:auto;
margin-top:10px;
margin-left:10px;
}
.gallery-close-button {
width:30px;
height:30px;
}
.gallery-content {
width:100%;
height:auto;
text-align:center;
}
.gallery-content-image {
width:20%;
height:100%;
opacity:0.6;
filter:alpha(opacity=60);
}
.gallery-content-image:hover {
background-color:#ffffff;
opacity:1.0;
filter:alpha(opacity=100);
}
.gallery-image-cell {
width: 100%;
height: 0;
padding-bottom: 20%;
margin-left: auto;
margin-right: auto;
}
</style>
Javascript :
<script tyep="text/javascript">
function showAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='inline';
}
}
function hideAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='none';
}
}
function pushImages(){
var imageArray = document.getElementsByClassName("gallery-content-image")
var imageLinkArray[];
imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
/*Use imageLinkArray.push("") to add a image; Add enough image.*/
for (var i=0; i<imageArray.length; i++){
imageArray[i].src = imageLinkArray[i];
}
}
</script>
I'm not sure where the problem is, but after clicking the button nothing happened.
Please help. Any help will be appreciated. Thank you.


<script>pushImages();</script>
This is calling a function before the DOM is even loaded, which should throw an error in your console. Place it at the bottom of your code or wrap it in window.onload = function() { .... }.
You're also missing an equal sign in this line: var imageLinkArray[]; (should be var imageLinkArray = [];.
I also suggest not practicing inline scripting. It's bad practice to do so. Try adding an event handler to the body (onclick only supports one event handler).
document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);

Related

How do I display hidden image when i click list on html using JS

for example, all images are hidden and when I click list, it should pop up. if I click "Hello1" text then image1 should popup
<li class nav-1>Hello1</li>
<li class nav-1>Hello2</li>
<li class nav-1>Hello3</li>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>

I would add id's to your images and put in a basic hide/unhide script:
<script>
function toggleHide(elementid){
a=document.getElementById(elementid).style.visibility;
if (a=="hidden"){
document.getElementById(elementid).style.visibility="visible";
}else{
document.getElementById(elementid).style.visibility="hidden";
}
}
</script>
<style>
/* hide all images */
#img1{
visibility:hidden;
}
#img2{
visibility:hidden;
}
#img3{
visibility:hidden;
}
</style>
<li class nav-1>Hello1</li>
<li class nav-1>Hello2</li>
<li class nav-1>Hello3</li>
<img src="images/1.jpg" id="img1" alt=""/>
<img src="images/2.jpg" id="img2" alt=""/>
<img src="images/3.jpg" id="img3" alt=""/>

In the example below, I used div instead of img, but the concept is the same...
Read the comments for more details please:
// Get the buttons and the images
let buttons = document.querySelectorAll('.btn');
let images = document.querySelectorAll('.image');
// For each button:
buttons.forEach(btn => {
// Onclick event:
btn.addEventListener('click', () => {
// Get all the images and remove the 'active' class
images.forEach(image => { image.classList.remove('active'); });
// Get the id of the clicked button (which is the data-image of the target image)
let target = btn.getAttribute('id');
// Add the class 'active' to the image
document.querySelector(`[data-image="${target}"]`).classList.add('active');
});
});
.image {
width: 100px;
height: 100px;
border: 1px solid;
opacity: 0;
transition: all 0.2s;
display: none;
}
.image.active {
opacity: 1;
display: block;
}
<button class="btn" id="image1">Image 1</button>
<button class="btn" id="image2">Image 2</button>
<button class="btn" id="image3">Image 3</button>
<div class="image" data-image="image1">1</div>
<div class="image" data-image="image2">2</div>
<div class="image" data-image="image3">3</div>

How to implement a slide page inside a page

I'm trying to implement a function like Google Image Search, which is that when you click a picture, a subpage appears in the screen below the picture. And it takes a whole line. The screenshot is showing below.
http://www.wy19900814fun.com/thumbnails/test.png
Here's my code. Is there anyone helping me to implement or at least give me some advise? I'm trying to do a function like when you click a picture, the second div class shows below the picture you click. It needs to take a whole line.
<html>
<head>
<style>
.container {
text-align: center;
}
.container img {
display:inline-block;
}
.subpage {
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div class="subpage">
<p>This is </br>just</br> a test.</br> Please show</br> subpage</p>
</div>
</body>
</html>

$('img').click(function() {
var $img = $(this),
offset = $img.offset(),
subPage = $('#subPage').hide().insertAfter('.container'),
nextImage = $img.next(),
finalImage = $img;
if (!$img.is(':last-child')) {
while (offset.top == nextImage.offset().top) {
nextImage = nextImage.next();
}
finalImage = nextImage.prev();
}
subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown();
});
.container {
text-align: center;
}
.container img {
display:inline-block;
width:32%;
vertical-align:top;
}
#subPage {
background:#222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div id="subPage"></div>

You could do like that :
JS :
$(document).ready(function () {
$('.container img').click(function () {
var src = $(this).attr('src');
var subpage = $('.subpage');
subpage.hide().empty().fadeIn(250);
$('<img>', {'src' : src}).hide(250).appendTo(subpage).fadeIn(250);
});
});
Jsfiddle

Display more than one image at onmouseover event

I have the following code which displays an image onmouseover and sets back the default image active onmouseout.
<img src="image1.jpg" onmouseover="this.src='image2.jp'" onmouseout="this.src='image1.jpg'" />
I want to be able to display multiple images onmouseover event; each displaying after a set time. Can anyone help me out on this?

HTML
<div id="container">
<img id="initialIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" />
</div>
<img src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" onmouseover="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png'" onmouseout="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png'" />
JavaScript
$(document).ready(function(){
$("#container").mouseenter(function() {
var t = setTimeout(function(){
$("#initialIMG").hide();
$("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png" )
$("#initialIMG").fadeIn(50);
$("#container").append( '<img id="addedIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/mixmaster-icon.png" style="display:none;"/>' );
$("#addedIMG").fadeIn(50);
},500);
});
$("#container").mouseleave(function() {
var t = setTimeout(function(){
$("#initialIMG").hide();
$("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" )
$("#initialIMG").fadeIn(50);
$("#addedIMG").remove();
},500);
});
});
FIDDLE

Try this:
function showImage() {
//Your code here
}
function hideImage() {
//Your code here
}
<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />

Is there any specific reason you don't want to use jQuery?
in css:
#my-pics .default{
display: inline;
}
in html:
<div id="my-pics">
<img src="image1.jpg" class="default" />
<img src="image2.jpg" style="display:none;" />
<img src="image3.jpg" style="display:none;" />
</div>
in js:
$("#my-pics").mouseenter(function(){
$(this).find(".default").hide();
$(this).find(":not(.default)").show();
}).mouseleave(function(){
$(this).find(".default").show();
$(this).find(":not(.default)").hide();
});
Of course you need to import jquery first. Haven't tested this myself, any errors?
CSS solution?
in html:
<div id="my-pics">
<img src="image1.jpg" class="default" />
<img src="image2.jpg"/>
<img src="image3.jpg"/>
</div>
in css:
#my-pics img{
display: none;
}
#my-pics img.default{
display: inline;
}
#my-pics:hover img{
display: inline;
}
#my-pics:hover img.default{
display: none;
}

A quick solution, maybe not the most beautiful one, but it works.
HTML:
<img id="image1" src="image1.jpg" onmouseover="showImages()" onmouseout="hideImages()" />
<img id="image2" src="image2.jpg" style="display:none;" />
<img id="image3" src="image3.jpg" style="display:none;" />
Javascript:
function showImages(){
document.getElementById('image2').style = '';
document.getElementById('image3').style = '';
}
function hideImages(){
document.getElementById('image2').style = 'display: none;';
document.getElementById('image3').style = 'display: none;';
}
Of course you should solve this with classes to clean up your code. This is just a basic example that works.

If you are using jQuery then when your document is ready:
<img class="main-image" data-target=".images-set1" src="mainImage1.jpg">
secondary images:
<div class="images-set1">
<img src="secondary1-1.jpg" style="display:none">
<img src="secondary1-2.jpg" style="display:none">
<img src="secondary1-2.jpg" style="display:none">
....
</div>
with jQuery:
$('main-image').on('mouseover', function (event) {
$($(event.target).attr('data-target') + ' img').show();
})
.on('mouseout', function (event) {
$($(event.target).attr('data-target') + ' img').hide();
});
this will just hide/show the secondary image element related to the main image,
tell me if this is not exactly the behaviour you want.

Adding Next and Prev Button for Thumbnails Gallery and Larger Image Gallery

I am trying to add the next and prev button for both thumbnail and larger image gallery. And that next and prev button should support the keyboard event listeners too.
This is the link which I have tried.
http://jsfiddle.net/L7yKp/36/
I need some help.

Here i have done complete solution for above issue for adding next and previous buttons.
Demo: http://codebins.com/bin/4ldqp7y
HTML
<div id="panel">
<div class="controls">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Thumbnail Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="thumbs">
<div class="thumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
</div>
</div>
<div class="controls" align="center" width="400px">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Large Image Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="large">
<div class="bigthumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
</div>
<div class="bigthumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" />
</div>
<div class="bigthumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
</div>
<div class="bigthumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" />
</div>
<div class="bigthumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
</div>
</div>
</div>
CSS:
#thumbs{
text-align:center;
background:#77a5c6;
padding:5px;
}
.thumb{
display:inline-block;
margin:0px;
padding:0px;
cursor:pointer;
}
#thumbs .active{
border:3px solid #333;
}
.controls{
margin-left:10px;
}
.controls img{
cursor:pointer;
margin:0px;
}
.controls span{
font-size:13px;
display:inline-block;
vertical-align:top;
margin-top:5px;
}
#large{
text-align:center;
}
#large .bigthumb{
display:none;
}
#large .active{
display:block;
}
#large .active img{
border:2px solid #333;
}
jQuery:
$(function() {
$("#thumbs").find(".thumb:first").addClass("active");
$("#large").find(".bigthumb:first").addClass("active");
var getIndex = $("#thumbs").find(".active").index();
$(".controls").each(function() {
$(this).find(".next").click(function() {
getIndex = $("#thumbs").find(".active").index();
getIndex += 1;
if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
getIndex = 0;
}
setActiveImage(getIndex);
});
$(this).find(".prev").click(function() {
getIndex -= 1;
if (getIndex < 0) {
getIndex = $("#thumbs").find(".thumb").length - 1;
}
setActiveImage(getIndex); //Set/Show Active Image
});
});
});
function setActiveImage(index) {
if (typeof(index) == "undefined" || index == "" || index == null) index = 0;
$("#thumbs").find(".thumb").removeClass("active");
$("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
$("#large").find(".bigthumb").removeClass("active");
$("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}
Demo: http://codebins.com/bin/4ldqp7y

See http://jsfiddle.net/L7yKp/37/
The problem is
$(['next','prev']).each(function(){
var that=this;
$('#'+that).click(function(){
$('#thumbs img.clicked')[that]().click();
});
});
because now you have
Next
Prev
and
Next
Prev
So the solution is;
$(['next','prev']).each(function(){
var that=this;
$('.'+that).click(function(){
$('#thumbs .clicked')[that]().click();
});
});
and
Next
Prev

How to get box index number using only javascript

i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>

window.onload=function() {
   var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
  Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
}
}
DEMO

Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the onload event.
(function(){
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML += "box"+i;
}
})();
http://jsfiddle.net/mmjW9/

Categories