Develop Reference

Change HTML with iMacros

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";})();

Pop Up HTML Image when clicked

Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}

The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>

I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>

How to cycle a class through siblings on an event

I am working on a full screen carousel, I want the captions to be images, I couldn't find an appropriate plugin. So I am building a custom solution.
I figured out how to trigger an event during slide change. Now I want the visible class to cycle through divs with .caption under div.carousel-captions
<div id="mycarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="images/slide2.jpg" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="images/slide3.jpg" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="images/slide4.jpg" data-color="lightgreen" alt="Fourth Image">
</div>
</div>
</div>
<div class="row">
<div class="carousel-captions">
<div class="caption visible">
<img src="images/banner2-text.png" alt="" class="img-responsive" />
</div>
<div class="caption second">
<img src="images/banner3-text.png" alt="" class="img-responsive" />
</div>
<div class="caption third">
<img src="images/banner4-text.png" alt="" class="img-responsive" />
</div>
</div>
</div>
The first caption is hiding properly with following jquery but how do I cycle through all the captions for each slides.
// Js
$('#myCarousel').on('slid.bs.carousel', function () {
$('.caption.visible').removeClass('visible');
})

Edit (just realized that you're actualy using bootstrap carousel)
Indicate which slide item is currently shown (by :visible or .active class), then grab its index and show .caption at the same index, using .eq(index)
$('#myCarousel').on('slid.bs.carousel', function(){
var i = $('.item.active').index(); // or: $('.item:visible').index();
$('.caption').removeClass('visible').eq(i).addClass('visible');
});
JSFiddle Demo

Replacing div with div while having few buttons on the same page

I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.

Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)

Jquery Cycle and Pixastic fast blur

I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});

I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)