I have two html list. One containing text and the other containing images. They all have data attributes. What I want to do is when I click on the text the image will change based the text clicked.
html
<div class="toggle">
<div class="menu">
<ul>
<li class="menu-list t1" data-id="0">R1</li>
<li class="menu-list t2" data-id="1">R2</li>
<li class="menu-list" data-id="2">Shop</li>
<li class="menu-list" data-id="3">Fleet</li>
</ul>
</div>
images
<div class="menu-pictures">
<img class="default" src="default.jpg" alt="">
<img data-id="0" src="r1.jpg" class="p1" alt="">
<img data-id="1" class="p1" src="r1.jpg" alt="">
<img data-id="2" src="shop.jpg" alt="">
<img data-id="3" src="fleet.jpg" alt="">
</div>
</div>
The default class is the default images that shows when the page loads... so the idea is to change the image when the text is being clicked on.
javascript
const menuList = document.querySelectorAll(".menu-list");
let convertList = [...menuList];
const def = document.querySelectorAll(".menu-pictures img");
let convertPictures = [...def];
const images = [
{ name: "0", img: "r1.jpg" },
{ name: "1", img: "r1.jpg" },
{ name: "2", img: "shop.jpg" },
{ name: "3", img: "fleet.jpg" },
];
menuList.forEach((list, e) => {
e.target;
let t = list.getAttribute("data-id");
list.addEventListener("click", function () {
if (images.find((img) => img.name === t)) {
console.log(e)
def[t].src = images[t].img;
console.log("hey");
} else console.log("wrong");
});
});
The idea here is for it to loop through text and get the data attribute and then check if the attribute matches the index of the images, then it will get the scr of the image and replace it with the default image src. But I'm stuck with the implementation
Related
I am new to javascript, so if this looks terrible I'm sorry.
I've been trying to get my image slideshow to change images every couple of seconds and continue to loop. so far this is what I've got. Any help would be appreciated!
let images = [{
imageUrl: `images/white.png`
},
{
imageUrl: `images/blue.png`
},
{
imageUrl: `images/black.png`
}
]
var showImage = 0;
function slideShow(imageIndex) {
document.getElementById('img1').src = images[imageIndex].imageUrl;
}
function startUp() {
document.getElementById('img1').src = images[showImage].imageUrl;
}
setTimeout(() => {
startUp();
showImage++;
if (showImage == images.length) {
showImage = 0
}
}, 3000)
<section id="TOPPICKS">
<div>
<p class="designshop">SHOP<br> NOW</p>
</div>
<div class="slideshowcontainer">
<div class="imagecontainer">
<img class='slideimage' id="img1">
</div>
</div>
<div>
<p class="designshop">SHOP<br>NOW</p>
</div>
</section>
<section class="xcolor1">
<div class="buttoncontainer">
<a class="slidebutton" onclick="slideShow(0)"></a>
<a class="slidebutton" onclick="slideShow(1)"></a>
<a class="slidebutton" onclick="slideShow(2)"></a>
</div><br><br>
<div>SHOP NOW</div>
</section>
<!-- should put src=firstimage and also width= and height=
Your img1 should be a more sensible name e.g. imageset1
document.getElementById("imageset1").src="http:mysite.wot/somefolder/image0.jpg";
is more how I know it to be, there are other ways
document.getElementById("imageset1").src=images[0];
-->
let images = [
`http:mysite.wot/somefolder/images/white.png`
,
`http:mysite.wot/somefolder/images/blue.png`
,
`http:mysite.wot/somefolder/images/black.png`
];
<img class='slideimage' id="imageset1" onload="startup();" src="http:mysite.wot/somefolder/image0.jpg" width="500" height="300">
I am working on API and this HTML code created dynamically
<li class="d-flex align-item-center movieId">
<a class=" d-flex w-100" data-mov="${res[i].id}">
<img src="https://image.tmdb.org/t/p/w500${res[i].poster_path}" class="img-fluid himg"
alt="${res[i].title}" style="width:60px; height:70px">
<p class=" p-3"> ${res[i].title}</p>
</a>
</li>
I want when I click on the <a> tag I get the data-mov attribute value... I did solve it but when I click on any elements inside the <a> like <img> and <p> the data-mov value did not get. However, these elements inside it.
this is what I am trying to do
$(".srearchResults ul").on("click", "a", function (event) {
let id = event.target.getAttribute("data-mov");
console.log(id);
//$(this).find("a").data("mov");
//$(this).find("a").attr("data-mov");
});
The two lines commented I used and get undefined. When clicking on <p> or <img> i get null what would be the solution for that?
Vanilla JavaScript solution:
const ulElement = document.querySelector("ul");
ulElement.addEventListener("click", function (e) {
let element = e.target;
let liElement;
while (element && element.nodename !== "UL") {
if (element.nodeName === "LI") {
liElement = element;
}
element = element.parentElement;
}
const anchor = liElement.querySelector('a');
console.log(anchor.dataset.mov);
});
<ul>
<li>
<a data-mov="data-mov-1">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100">
<p>1</p>
</a>
</li>
<li>
<a data-mov="data-mov-2">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100">
<p>2</p>
</a>
</li>
</ul>
When using event.target it'll select the element you click on not the a and while img and p doesn't have data-mov it will output null or undefined .. so you need to use let id = $(this).data("mov"); instead .. no need to use .find('a') because $(this) will select the a for you and no nested a inside the clicked a
This is how your code work [data-mov added to the img] so when you click on the img you'll get the data-mov of the img
let res = [
{
'id' : 1,
'poster_path' : 234,
'title' : 'anything'
},
]
$('ul').append(`<li class="d-flex align-item-center movieId">
<a class=" d-flex w-100" data-mov="${res[0].id}">
<img data-mov="image data mov" src="https://image.tmdb.org/t/p/w500${res[0].poster_path}" class="img-fluid himg"
alt="${res[0].title}" style="width:60px; height:70px">
<p class=" p-3"> ${res[0].title}</p>
</a>
</li>`);
$("ul").on("click", "a", function (event) {
let id = event.target.getAttribute("data-mov");
console.log(id);
//$(this).find("a").attr("data-mov");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>
And this is how it should work
let res = [
{
'id' : 1,
'poster_path' : 234,
'title' : 'anything'
},
]
$('ul').append(`<li class="d-flex align-item-center movieId">
<a class=" d-flex w-100" data-mov="${res[0].id}">
<img data-mov="image data mov" src="https://image.tmdb.org/t/p/w500${res[0].poster_path}" class="img-fluid himg"
alt="${res[0].title}" style="width:60px; height:70px">
<p class=" p-3"> ${res[0].title}</p>
</a>
</li>`);
$("ul").on("click", "a", function (event) {
let id = $(this).data('mov');
console.log(id);
//$(this).find("a").attr("data-mov");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>
I'm making slider with Angularjs using modal. I'm trying to accomplish when clicking on picture modal pops up displaying image that I have clicked.
.html
<div class="float" ng-repeat="a in $ctrl.f">
<div class="column is-narrow topIcons">
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture()">
<figure class="image is-128x128">
<img ng-src="{{a.imageSrc}}">
</figure>
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-background" ng-repeat="a in $ctrl.f"></div>
<div class="modal-content">
<p class="image is-4by3">
<img ng-src="{{togglePicture(a.id)}}">
</p>
</div>
<button class="modal-close" ng-click="$ctrl.closeModal()"></button>
</div>
component.js
function PhotoController($scope){
var vm = this;
vm.f = [{
albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 1
},
{ albumName: "Name",
imageSrc: 'app/images/bio.jpg',
owner: "OwnerName",
id: 2
}];
vm.togglePicture = function(id) {
$('#myModal').addClass('is-active');
};
I'm trying to get imageSrc by passing id of an image as a function parameter but is not working. What should I do in my function to select correct imageSrc using id and then to display it and how my imageSrc should look like?
Was thinking something like this <img ng-src="{{togglePicture(a.id)}}">?
Pass Selected image in funnction.
<div class="photo topIconsHover" ng-click="$ctrl.togglePicture(a)">
Then set selcted image in controller
vm.selectedImgsrc='';
vm.togglePicture = function(a) {
$('#myModal').addClass('is-active');
vm.selectedImgsrc=a.imageSrc;
};
Then modify modal to view selected image
<p class="image is-4by3">
<img ng-src="{{$ctrl.selectedImgsrc}}">
</p>
I have a problem with function based on each loop. I am beginner and I havent find my answer on other topics.
I have function like this:
function treeToCloud() {
$(".treelist .treeimage").each(function(){
idCloudImage = $(".cloud-img img").attr("class");
cloudImage = $(".cloud-img img");
if($(this).attr("id") == idCloudImage) {
var treeImage = $(this).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
}
HTML like this:
<div class="treelist">
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/1.jpg" id="231" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/2.jpg" id="21" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/3.jpg" id="44" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/4.jpg" id="45" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/5.jpg" id="46" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/6.jpg" id="441" class="treeimage"></div>
</div>
</div>
second part HTML:
<div class="say-item cloud">
<div class="cloud-img">
<img src="images/addci.jpg" class="45">
</div>
<div class="cloud-img">
<img src="images/addci.jpg" class="46">
</div>
</div>
JSON like this:
{
"images": [
{
"id": "231",
"uri": "images/1.jpg"
},
{
"id": "21",
"uri": "images/2.jpg"
},
{
"id": "44",
"uri": "images/3.jpg"
},
{
"id": "45",
"uri": "images/4.jpg"
},
{
"id": "46",
"uri": "images/5.jpg"
},
{
"id": "441",
"uri": "images/6.jpg"
}
]
}
second JSON (part) like this:
{
"iconId": "45"
},
{
"iconId": "46"
}
And now. I have add all id's with JSON load using .attr("id") (working correctly). JSON id is in .treelist class and second JSON ("iconId") into selectors in .cloud class.
Now I need to compare them and if id in ".treelist" is the same like id in ".cloud" class I want to give for .cloud img source like is in the same id in .treelist.
I have created function, but it is changing only one (first) element and stops.
I need your help with this because I dont understand why it not working correctly
Thanks, Fantazy
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var currentTree = $(this);
$(".cloud .cloud-img").each(function(){
idCloudImage = $(this).find("img").attr("id");
cloudImage = $(this).find("img");
if($(currentTree).attr("id") == idCloudImage) {
var treeImage = $(currentTree).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
});
}
Please try following code
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var firstId = $(this).attr("id");
$(".cloud-img img").each(function(){
var secondId = $(this).attr("id");
if(firstId == secondId ) {
$(this).attr("src", treeImage);
}
});
});
}
Thanks! vijayP solved my problem ! :)
Urvi - thanks, but Your code not working
Final code:
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var currentTree = $(this);
$(".cloud .cloud-img").each(function(){
idCloudImage = $(this).find("img").attr("class");
cloudImage = $(this).find("img");
if($(currentTree).attr("id") == idCloudImage) {
var treeImage = $(currentTree).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
});
}
I wrote a simple function that takes content from one div and put it to the other when specified element is clicked. I did it for the image caption in my slider. So, when you click arrow which is an anchor, then content from div 'orbit-caption' assigned to the 'active' slide is put to the other one 'image-caption'.
<ul class="projects-slider" data-orbit>
<li>
<img src="img/projects/1.jpg" alt="slide 1" />
<div class="orbit-caption">
Text 1
</div>
</li>
<li>
<img src="img/projects/2.jpg" alt="slide 2" />
<div class="orbit-caption">
Text 2
</div>
</li>
<li>
<img src="img/projects/3.jpg" alt="slide 3" />
<div class="orbit-caption">
Text 3
</div>
</li>
<li>
<img src="img/projects/4.jpg" alt="slide 4" />
<div class="orbit-caption">
Text 4
</div>
</li>
<li>
<img src="img/projects/5.jpg" alt="slide 5" />
<div class="orbit-caption">
Text 5
</div>
</li>
</ul>
<span></span>
<span></span>
<footer><div class="img-caption"></div></footer>
<script>
$(document).ready(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
$('.orbit-container a').click(function() {
var caption = $('li.active .orbit-caption').html();
$('.img-caption').text(caption);
});
});
</script>
The problem is that click is delayed, I mean that when I click once, my image got description of previous one. Could someone help me with this problem and show how to simplify my function?
Is it what you want ?
http://jsfiddle.net/OxyDesign/5o3aa225/
JS
$(document).ready(function() {
$('.img-caption').text($('li.active .orbit-caption').html());
$('.orbit-next,.orbit-prev').click(function() {
var currentLi = $('li.active'),
newLi = $(this).hasClass('orbit-next') ? currentLi.next() : currentLi.prev();
if(newLi.length){
currentLi.removeClass('active');
newLi.addClass('active');
$('.img-caption').text(newLi.find('.orbit-caption').html());
}
});
});
You also can use the settings of the orbit slider (Orbit Doc) and add your function as a callback (after_slide_change) :
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: false,
animation_speed: 500,
navigation_arrows: true,
timer: false,
bullets: false,
slide_number: false,
slide_number_text: 'of',
swipe: true,
variable_height: 'auto',
after_slide_change : function(){
$('.img-caption').text($('li.active').find('.orbit-caption').html());
}
}
});
Or you can use the event after-slide-change.fndtn.orbit (Orbit Doc)
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('li.active').find('.orbit-caption').html());
});
Or
$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) {
$('.img-caption').text($('.orbit-caption').eq(orbit.slide_number).html());
});