How to execute javascript for each individual nested div displaying images? - javascript

I am trying to get a JS script to execute solo within each nested div. I have class conflicts, and I am unable to figure out how to basically iterate the script through each div without conflicts.
I have tried using .each, running different loops, classing the divs, and more. I have tried numerous things unsuccessfully. I wish I had kept track of all the different methods, but I've been at this for hours and have been unsuccessful in finding the correct syntax. It's quite obvious, I need serious work when it comes to programming. I have HTML, CSS, and bootstrap down pretty well, but Javascript and jQuery, I have just begun learning.
<link href="Styles/StyleSheet.css" rel="stylesheet" />
<script src="Scripts/thumbs.js"></script>
<div class="container-fluid maxW opaque padtop">
<!-- Jumbotron -->
<div class="jumbotron container-fluid">
<div>
<img src="jumbo.jpg" alt="" /></a>
</div>
</div>
<!--First Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 1</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumpic.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
<!--Second Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 2</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumotherpic1.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic2.jpg" alt="" onmouseover="preview(this)" />
<img id="3" class="thumb normal" src="sumotherpic3.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
</div>
Here's the CSS:
.preview {
width: Auto;
max-height: 600px;
}
.thumb {
width: 205px;
margin-right: 3px;
}
.normal {
border: 3px solid #000000;
}
.selected {
border: 3px solid #ff0000;
}
And the JavaScript code:
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
I think that's everything.
So what I'm aiming for is each div block to have the thumbs underneath and the mouse-dover image displayed above as the large displayed image. It works great so long as there is one single div. As soon as I add 2+ I run into what I'm assuming is class conflicts where only the first div displays the large image. It will display the large image that was last moused over in any of the divs. It is empty in all divs, except the first. The thumbs have no issues being displayed in each div. Thank you in advance for any help, and thank you for understanding I'm new to this and trying to learn.

Well, your using pure Javascript, no jQuery. That's ok of course
The obvious error I'm seeing is id = 0 instead of "0"
Another thing is "className" youre using instead of set attribute class
I would recommend in general 2 things:
Using example cases, and F11 and opening the console
As per you code, I made small fixes to get you going, and to understand the next step. I think that you should define object vars for lastimg, "0" and img then make the code more readable and scalable
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById("0").src = document.getElementById(lastImg).src;
document.getElementById(lastImg).setAttribute("class", "thumb selected");
function preview(img) {
document.getElementById(lastImg).setAttribute("class", "thumb normal");
document.getElementById(img).setAttribute("class", "thumb selected");
document.getElementById("0").getAttribute("src") = document.getElementById("img").getAttribute("src");
lastImg = img;
}

Related

Bootstrap Carousel Thumbnail Border not auto updating.

When the carousel goes to the next slide the border on the thumbnails should move to the next thumbnail to correspond with that image change. They do not. I discovered this error when adding a closing div to .carousel-inner that wasnt there it was causing my carousel to collapse after the last slide. Here is the code.
HTML
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="img/100325-01.jpg" class="img-responsive" alt="Regional Open Space Comparison" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit:<br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
<div class="item" data-slide-number="1">
<img lazy-src="img/100325-02.jpg" class="img-responsive" alt="Ecological Analysis" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit: <br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
</div>
CSS
.carousel-selector > .active, .selected img {
border: solid 2px #003C30;
}
JS
$('#myCarousel').carousel({
interval: 13000
});
// handles the carousel thumbnails
$('.carousel-selector').click(function () {
var selectorIdx = $(this).closest('li').index();
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
});
Here's how you'd do it by index rather than all that string parsing.
$('.carousel-selector').click(function () {
$('#myCarousel').find('.carousel-selector').removeClass('selected');
var selectorIdx = $(this).addClass('selected').closest('li').index();
$('#myCarousel').find('.item').removeClass('selected')
.eq(selectorIdx).addClass('selected');
$('#myCarousel').carousel(selectorIdx);
});
Demo
Note that 1) I've added classes to each control element, and 2) I've removed the previous/next controls because they were overlapping the individual controls.
Here's a fun chained version:
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
Demo 2

Stop simple JavaScript slideshow after one loop

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');
}, 3000);
As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.
<div id="slideshow">
<div>
<img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
</div>
<div>
<img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
</div>
</div>
Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)
JS/Jquery:
$(function () {
setTimeout(playSlideShow, 3000);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 3000);
}
}
});
So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".
CSS:
.slideShow > div:not(.showImg) {
display: none;
}
.showImg {
display: block;
width: 400px;
height: 400px;
}
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="Images/img1.png" alt="" />
</div>
<div>
<img src="Images/img2.png" alt="" />
</div>
<div>
<img src="Images/img3.png" alt="" />
</div>
<div class="lastImg">
<img src="Images/img4.png" alt="" />
</div>
</div>
This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".
Here is a fiddle
Hope it helps...
Try this:
var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');
//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();
intervalID = setInterval(function(){
divs.eq(iterator).hide();
iterator += 1;
if (iterator === divs.length - 1) { clearInterval(intervalID); }
divs.eq(iterator).show();
}, intervalDuration);
#slideshow > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
</div>
The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.
Add as many DIVs as you like in your HTML to test it out. Hope it helps.
Update #1:
Added CSS to hide the divs by default.
Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
Commented the filter line of JS.
Added another JS line right below the previous filter line.
This update should also load your GIF only when it is needed to appear, hence will not be running in the background.
Let me if this works.

How to change Class From jquery but remove that class from another object

i have problem. i don't no how to fix that problem
HTML Code:
<div class="image">
<a href="#">
<img src="images/image1.jpg" id="mainimg-1">
</a>
</div>
<div class="otherthumbnailcontainer">
<div class="thumbnailimages" id="thumbnailcont-1">
<img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">
<img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">
</div>
</div>
Here is code:
function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
$('#'+mainimgid).attr("src", thumburl);
// $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
$('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
// $('#'+thumbnailimg).toggleClass("selectedthumb");
}
Now what i would like to do on the website page is completely load the first image with these two class "thumbsmallimg selectedthumb" but when mouse goes over on another image the class "selectedthumb" will switch from one image to another.
EDIT:
http://jsfiddle.net/nZMpW/ Check this link. its like a product image gallery when you hover mouse on down image its come in big image. but first down image is selected if you move on another image its come in big image but is not select. css this ":hover" option only work when you mouse on that image but i don't want to do this
remove all you onmouseover events and use this jquery code in the $(document).ready() section
$(".thumbsmallimg").mouseover(function() {
$("#mainimg-1").attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
and, if you want it to work with several sets of thumbnails/bigImages, you can use data() attributes:
<img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1" class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
<img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2" class="thumbsmallimg" data-big-image="mainimg-1">
.....
and in jqQuery:
$(".thumbsmallimg").mouseover(function() {
$("#" + $(this).data("big-image")).attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
here is your Fiddle updated again
instead having selectedthumb, in your css put those styles inside .thumbsmallimg:hover{
.thumbsmallimg:hover{
/* the styles that wrere in class .selectedthumb */
}

Javascript img tag src switch function not working

I have a small app the uses 3 images as buttons, the images are different colors, above the image buttons there is a big pair of glasses, depending on what color button you press the color of the glasses will change to match the color of the button that was pressed. The problem is I am getting a "Cannot set src to null" error.
Here is a jsfiddle: http://jsfiddle.net/vAF8S/
Here is the function
//Functions that change the glasses image
function changeColor(a){
var img = document.getElementById("imgG");
img.src=a;
}
you have two Id's for the tag. you should have only one ID. change your html.
<section id="banner" >
<img id="imgG" src="images/orangeG.png"><br>
<img id="wcolorButton" src="images/whiteT.png" />
<img id="bcolorButton" src="images/blueT.png" />
<img id="ocolorButton" src="images/orangeT.png" onClick="changeColor('images/whiteG.png')" />
</section>
FIDDLE
you are getting this error because you have applied ID twice to the same element
use this HTML
<section id="banner" >
<img class="glasses" id="imgG" src="images/orangeG.png"><br>
<img class="wcolorButton" src="images/whiteT.png" />
<img class="bcolorButton" src="images/blueT.png" />
<img class="ocolorButton" src="images/orangeT.png" onClick="changeColor('images/whiteG.png')" />
</section>

How to auto-scroll div content vertically continuously

I need to scroll the div which contains images, vertically. Any help or references will be highly appreciated.
Maybe something like this would help? First and last images are supposed to be the same.
JS:
(function(){
var box=document.getElementById('box');
box.appendChild(box.firstChild.cloneNode());
function infScroll(){
box.scrollTop +=1;
if(box.scrollTop===300){
box.scrollTop=0;
}
window.requestAnimationFrame(infScroll);
}
window.requestAnimationFrame(infScroll);
}());
HTML:
<div id="box" style="width:150px; height:100px; overflow:hidden;">
<img src="http://placekitten.com/150/90" />
<img src="http://placekitten.com/150/120" />
<img src="http://placekitten.com/150/80" />
<img src="http://placekitten.com/150/90" />
</div>

Categories

Resources