Change HTML with iMacros - javascript

I am trying to change this with iMacros:
<div id="outerd3">
<img src="bnner0.jgp" alt="">
<img src="flamingo.jpg" alt="">
<img src="avatar.jpg" alt="">
</div>
into this
<div id="outerd3">
<img src="avatar.jpg" alt="">
<img src="avatar.jpg" alt="">
<img src="avatar.jpg" alt="">
</div>
If possible, please help me to achieve this.

You can use this code for change img src.
$('img').each(function () {
$(this).attr("src","avatar.jpg");
});

And here is a solution for 'iMacros':
URL GOTO=javascript:(function(){var<SP>img=document.querySelector("#outerd3").querySelectorAll("img");for(i=0;i<img.length;i++)img[i].src="avatar.jpg";})();

Related

How to remove div if img src is empty with javascript

Hi I am trying to figure out how to remove a div if the img src is empty.
I've searched on stackoverflow, but most are all jq based. Can someone help in vanilla javascript?
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
alt=""
class="imgCard"
color=""
/>
</div>
<div class="swiper-slide">
<img
src=""
alt=""
class="imgCard"
color=""
/>
</div>
</div>
Here how you can do this
const swipers = document.querySelectorAll('.swiper-slide');
swipers.forEach(e => {
const imgSource = e.querySelector('img').getAttribute('src');
if (imgSource.trim() === '') {
e.remove()
}
})
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="" class="imgCard" color="" />
</div>
</div>
You can get all images which are child of .swiper-slide class and check if their have src attribute different than an empty string like this
let imgs = document.querySelectorAll(".swiper-slide img");
imgs.forEach(item => {
if (item.getAttribute('src') === "") {
item.parentNode.remove();
}
});
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="First image alternate text" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="Second image alternate text" class="imgCard" color="" />
</div>
</div>

Owl Carousel Not Showing Correctly

I've my bootstrap website and it's work good ...
All JAVASCRIPT codes working except the owl carousel
here is the owl carousel code:
<section id="gallery" class="wow fadeInUp">
<div class="owl-carousel gallery-carousel">
<img src="img/gallery/1.png" alt="">
<img src="img/gallery/2.png" alt="">
<img src="img/gallery/3.png" alt="">
<img src="img/gallery/4.png" alt="">
<img src="img/gallery/5.png" alt="">
<img src="img/gallery/6.png" alt="">
<img src="img/gallery/7.png" alt="">
<img src="img/gallery/8.png" alt="">
</div>
</section>
The carousel showing only two images
Website Files Here
This is simple just add style for the container like this.
<section id="gallery" class="wow fadeInUp animated" style="direction: ltr;">

Angular ng-click, ng-mouseover expression and mouseover

I encountered a little problem. I am making a little gallery and saw html like this:
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/>
<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/>
<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/>
<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/>
<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/>
</div><br/>
<div class="preview" align="center">
<img name="preview" src="images/img1.jpg" alt=""/>
</div>
And now I wanted to do it repeatedly from json object So I did sth like this:
<div class="mythumbnails">
<img ng-click="mypreview.src=img{{$index}}.src" src="data:image/png;base64,{{x}}" name="img{{$index}}" ng-repeat="x in data.gallery" alt=""/>
</div><br/>
<div class="mypreview" align="center">
<img name="mypreview" src="data:image/png;base64,{{ data.gallery[0] }}" alt=""/>
</div>
Firstly I did mouseover but I couldn't use {{ $index }}, so I did ng-mouseover and ng-click. I don't know if the expression is wrong or what.
Thanks up front :)
#edit
The problem is when I click the main picture from mypreview doesn't change.
#edit2
In Firebug:
<img class="ng-scope" ng-click="mypreview.src=img4.src" src="data:image/png;base64,..." name="img4" ng-repeat="x in data.gallery" alt="">
So it the index works.
#edit3
At the beginning I got error in console: Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=18&p3=mypreview.src%3Dimg%7B%7B%24index%7D%7D.src&p4=%7B%7B%24index%7D%7D.src
Try to replace
src="data:image/png;base64,{{ data.gallery[0] }}"
to
data-ng-src="data:image/png;base64,{{ data.gallery[0] }}"
If anyone would be interested I did this:
onmouseover="mypreview.src=this.src"

HTML Javascript - Get all elements with ID

I am using the waterwheel-carousel image slider located here. I would like to have multiple carousels on one page.
Here is a snippet of my code:
<script>
// load carousel
$(document).ready(function () {
$("#waterwheel-carousel").waterwheelCarousel({
separation: 90,
separationMultiplier: 0.2,
horizonOffsetMultiplier: 1
});
});
</script>
.
.
.
<div id="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div id="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div id="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
And the CSS:
/* Projects page carousel(s) */
#waterwheel-carousel {
width: 200px;
height: 216px;
position: relative;
clear: both;
overflow: hidden;
margin: 0 auto;
}
#waterwheel-carousel img {
cursor: pointer;
border: 5px solid black;
}
The issue is that only the first #waterwheel-carousel will load. The other two do not. I did some research and it seems like it may only be returning the first element with that id. So I have tried a different approach on my $(document).ready(.. function, adding class="waterwheel-carousel" to each div:
<script>
$(document).ready(function () {
var allElements = $(document).getElementsByClassName("waterwheel-carousel");
for (var i = 0; i < allElements.length; i++) {
var currentElement = allElements[i];
currentElement.waterwheelCarousel({
separation: 90,
separationMultiplier: 0.2,
horizonOffsetMultiplier: 1
});
}
});
</script>
But then they all fail to load.
Anyone have any ideas?
Thanks.
Element IDs should be unique within the entire document. see
Instead of id use class to get all element
<script>
// load carousel
$(document).ready(function () {
$(".waterwheel-carousel").waterwheelCarousel({
separation: 90,
separationMultiplier: 0.2,
horizonOffsetMultiplier: 1
});
});
</script>
.
.
.
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
This is what classes are for, IDs are unique. Which means that each element in the document must have a different ID.
Modify your HTML:
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
and you're good to go.

Pure jquery method for wrapping each 9 img's in a div

I have a div which contains a certain number of img's. Let's say 21. What I want to do is wrap a div around every 9 img's. In what way can I achieve this?
My html structure:
<div id="parent">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
Which should become:
<div id="parent">
<div>
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
<div>
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
You can do this:
var $img = $("#parent img");
for (var i = 0; i < $img.length; i += 9) {
$img.slice(i, i + 9).wrapAll("<div/>");
}
FIDDLE DEMO
This is not pure jQuery but works:http://jsfiddle.net/GEQyA/
html:
<div id="parent">
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
js:
var $images = [];
$('#parent').children().each(function(index, value){
$images.push(this);
});
$('#parent').children().each(function(index, value){
$(this).remove();
});
$('#parent').ready(function(){
write();
});
function write() {
var counter = 0;
$('#parent').append('<div class="innerDiv">');
$($images).each(function(index, value){
if (counter == 2) {
$('#parent').append('</div><div class="innerDiv">');
counter = 0;
}
$('#parent').append($(this) + counter);
if (index == $images.length) {
$('#parent').append('</div>');
}
counter += 1;
});
}

Categories

Resources