I want the images/r1.jpg, r2.jpg, r3.jpg, r4.jpg to use the same array I wrote at the top.
so these five images in grid as a part will automatic displaying the same content randomly.
The other <div class="row"> which refers to my row will do the same stuff.
I have 5 parts in total. The other four parts will have their own contents.
I tried everything I can do and I changed the id stuff but it doesn't work.
<script language="javascript">
var picRoots = ['images/r1.jpg','images/r2.jpg','images/r3.jpg','images/r4.jpg','images/r5.jpg','images/r6.jpg','images/r7.jpg','images/r8.jpg','images/r9.jpg','images/r10.jpg'];
picRoots.sort(function(){return Math.random()>0.5?-1:1;});
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for(i=0; i < picRoots.length; i++) {
imgO[i] = new Image();
imgO[i].src = picRoots[i];
}
function swapImage() {
curPic = (++curPic > picRoots.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage,100);
}
window.onload=function() {
imgCont = document.getElementById('imgBanner1');
swapImage();
}
</script>
<body>
<div style="text-align:center" class="grid">
<div class="row">
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/r5.jpg" id="imgBanner1"/> </div>
<div class="image"> <img src="images/r1.jpg" /> </div>
<div class="image"> <img src="images/r2.jpg" /> </div>
<div class="image"> <img src="images/r3.jpg" /> </div>
<div class="image"> <img src="images/r4.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div>
</body>
Related
<div class="row">
<div class="column">
<div class="container">
<img
src="../images/img1.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal1"><h1>Marathon</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img5.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal5"><h1>Weight Lifting</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img8.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal8"><h1>Jogging</h1></div>
</div>
</div>
</div>
</div>
How to add modals so I can open other pages ( image01.html, image05.html ....) when I click on h1 from that photo.. I am new in this and i can't find a soulution. Any help would be great
I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags
let animals = document.querySelectorAll('.animal-name');
let animalNames = [];
for(let i=0; i<animals.length; i++){
animalNames.push(animals[i].textContent)
}
animalNames = animalNames.sort();
for(let i=0; i<animals.length; i++){
animals[i].textContent = animalNames[i];
}
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:
const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();
Array.from(container.children)
.sort((a, b) => key(a).localeCompare(key(b)))
.forEach(child => container.appendChild(child));
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
</div>
You can do this by appending the elements to the DOM dynamically using JS.
For example,
const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
document.getElementById("animal-container").appendChild(
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">{word}</div>
</div>
)})
I have some itemBox，I need to click itemBox and call the workItem which has same id number to SildeUp(the workItem is hidden at the beginning).
When one of workItem SlideUp，others would be hidden.
<div class="container">
<div class="row">
<div class="wrapper">
<div class="itemBox" id="item0">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
<div class="itemBox" id="item1">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
</div>
</div>
</div>
<div class="workContent">
<div class="workItem" id="work0" style="background-color:#000000;">
<h2>demo1</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
<div class="workItem" id="work1" style="background-color:#333333;">
<a class="close" href="javascript:">x</a>
<h2>demo2</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
</div>
How can I do this with javascript or Jquery?
this is simple (i used jQuery):
$(".itemBox").click (function(){
$("div[id^=work]").hide();
var id = $(this).attr("id");
var number = id.match(/item([0-9]+)/));
if (number[1])
$("div[id=work" + number[1] + "]").show();
})
Image hover is not working in the below code. Whenever I try to hover on a particular image that particular image is not being displayed. But if I remove the second portion (In comments in code) from code then it's working perfectly.
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2>
<div class="divider-header"></div>
<p style="text-align:justify">It is a major construction firm.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
<!--*****************Second portion*******************-->
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2>
<div class="divider-header"></div>
<p style="text-align:justify"> Construction is a major construction firm.
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
</body>
Have this function which accepts target and source and changes to required target's src
function changeSrc(control,target)
{
var targets=target.children[0]; //get its children
targets.setAttribute('src',control.getAttribute('src'));//change its src
}
Your updated HTML
Instead of onmouseover="preview.src=img1.src" call function onmouseover as onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"
DEMO HERE
The problem with your previous code was, there were 2 elements with same name preview and when you said preview.src it fetched list of elements and wasn't able to assign it to proper preview - element.
I'm working on a site, with 2 photo sliders from "owl-carousel".
The first slider works perfectly, but the second slider places all the photo's under each other.
Is it a problem in the jquery or just in the html?
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- portfolio media -->
<div class="portfolio-images">
<!-- image slider -->
<div id="owl-portfolio1" class="owl -carousel">
<div class="item active"> <img src="images/print1.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print2.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print3.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
<div class="item"> <img src="images/print4.jpg" class="img-responsive img-thumbnail" title="" alt="" /> </div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#owl-portfolio").owlcarousel({
});
$("#owl-portfolio").owlcarousel({
});
});
</script>
</div>
Have you made sure each has a specific id selector like #owl-carousel-1 and #owl-carousel-2 then activate each one individually with the initiation code, changing the selector to suit each case.
<div id="owl-carousel-1" class="owl-carousel" >
<!-- the carousel -->
</div>
<div id="owl-carousel-2" class="owl-carousel" >
<!-- the second carousel -->
</div>
<script>
$(document).ready(function() {
$("#owl-carousel-1").owlCarousel();
$("#owl-carousel-2").owlCarousel();
});
</script>