Develop Reference

Jquery, url stays the same in a each function on <a> element (UserScript)

So i have this problem i couldn't get the html code of page using ajax from a userscript since the page loads only a bit of the page firstly before everything else so performing ajax from a userscript to get the whole page html is impossible. So i used an invisible i frame to bypass the problem. And it works fine. But my url always stays the same and i don't know why, i'm doing a .each() function on some <a> elements but something's wrong.
What i want to do is using the magnific popup library and open images in a popup. Basicly this part works but the url of the image doesn't change so no matter what image i click it's always the same image.
Here's my code
var link = '';
var link2 = '';
var iFrame = $('<iframe id="tempData" style ="display: none">').appendTo('body');
$("head").append('<link rel="stylesheet" href = "https://49535f300cc62ae84be0bc4341ad834057099639.googledrive.com/host/0B7xSofmydrHqMU9pRDJXTEtpQWc">');
$(document).ready(function() {
$('section[class="article"]').find("#intelliTXT").find('a').each(function(){
var that = $(this);
if (that.find('img').attr('src') != undefined){
iFrame.attr('src',that.attr('href'));
iFrame.load(function(){
link = iFrame.contents().find('.big').find('img').attr('src');
that.magnificPopup({
items: {
src: link
},
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
}
});
});
And somehow the link variable stays the same on every image i click. I don't know why. Any help please?
link2 is the url on the main page the one i have to access to find the actual image to show in the popup.
linkis the url of the image that has to be shown in the popup. And it's also the link that always stays the same. And it's always the last image of the page.
I made and alert to check if the link2 variable changes and it is changing so i should get a new link everytime the iframe is done loading but in magnificPopup function the link stays always the same
HTML
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00CE007400811425.jpg" alt="Senran Kagura Estival Versus 2015 07 13 15 005" width="206" height="116">
That's on the main page, there's some other link too. The img inside the is only a screenshot. The href in is the link to the second page where the image with the actual big size is located.
<section id="zoom" class="galerie">
<nav class="smalls clearfix">
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-001-811421-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-001_00DC007C00811421.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_001">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-007-811427-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-007_00DC007C00811427.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_007">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-005-811425-264284" class="small active">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_00DC007C00811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-004-811424-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-004_00DC007C00811424.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_004">
</a>
<a href="/image/senran-kagura-estival-versus-2015-07-13-15-003-811423-264284" class="small">
<img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-003_00DC007C00811423.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_003">
</a>
</nav>
<div class="zoom">
<span class="big"><img src="http://global-img.gamergen.com/senran-kagura-estival-versus-2015-07-13-15-005_0903D4000000811425.jpg" alt="Senran-Kagura-Estival-Versus_2015_07-13-15_005"></span>
<header>
<h1 class="titre">Senran-Kagura-Estival-Versus_2015_07-13-15_005</h1>
</header>
</div>
<div class="bup"> <script type="text/javascript">tmntag.adTag('side_ad');</script>
</div>
<a class="btn" data-icon="" href="/actualites/senran-kagura-estival-versus-premieres-images-ayame-combattante-264284-1">Retour au contenu</a>
</section>
This is on the second page. The image inside .big class is the image i clicked on the main page and it has it's real size. The link inside the img element of this .big class is the link i have to use. All the other images are only small screenshots of some other images i don't have to use them.
SOLUTION
Well, finally i managed to make it work, just create a different iframe for each link.
var iFrameContainer = $('<div id="iFrameContainer" style = "display: none">').appendTo('body');
and then just append a new iframe to it in the each function
var iFrame = $('<iFrame>').appendTo(iFrameContainer);

link = iFrame.contents().find('.big').find('img').attr('src');
Looks like you are adding the same url to every iterated link. Try to iterate over images.

You can try with onload
iFrame.on('load', function() {
iFrame.load(function(){
link = iFrame.contents().find('.big').find('img').attr('src');
that.magnificPopup({
items: {
src: link
},
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
});

Click image within slider to show text

On http://www.socialstudent.co.uk/stackoverflow/ I am trying to work out a way to make it so when you tap an image on mobile, it makes text appear below it and a button. Then if you tap it again it disappears.
I have tried the usual ways in JS but none seem to work. Any ideas on how I can get that to happen would be great!
An example would be this - http://jsfiddle.net/ZECTP/ but with the image being tapped on mobile.
JS off jsfiddle as was required:
$(function () {
var div = $('#showOrHideDiv');
$('#action').click(function () {
div.fadeToggle(1000);
});
});
HTML off jsfiddle as was required:
<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>
It needs to be in addition to the text which is on the image, as below text and a button needs to appear.
Thanks!

I checked the source code of the site you provided and you would need to add this code to get the desired effect. I'm assuming you want to show/hide the text over each image.
var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
el = $(this);
el.find('div').fadeToggle('fast');
})

Check this udpated fiddle
I think this is what you are looking for.
HTML
<figure class = "figure">
<img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
<figcaption class = "figcaption">
SOME TEXT HERE
</figcaption>
</figure>
CSS
figure {
font-size: 100%;
}
figcaption {
display: none;
}
jQuery
$(document).ready(function(){
$(".figure").click(function(){
$(".figcaption").toggle();
});
});

Link not working on image?

I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});

img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.

here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});

I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.

Superslides -> Go to specific slider

I use Superslides to create an intro. I need that at first the background is white (image 0.jpg) and then when the mouse enters a div change to another image random.
My code is:
HTML
<div id="entra_mouse">
<img src="imagenes/intro/logo.png" alt="" />
<br /><br /><br />
Entrar / Enter
</div>
<div id="slides">
<div class="slides-container">
<img src="imagenes/intro/0.jpg" alt="" />
<img src="imagenes/intro/1.jpg" alt="" id="img_aleatoria" />
</div>
</div>
Javascript
<script>
$(function() {
$('#slides').superslides({
hashchange: false
});
$('#entra_mouse').on('mouseenter', function() {
$('#slides').css('display','inline');
var imagen_aleatoria = Math.round(Math.random()*6);
$("#img_aleatoria").attr("src", "imagenes/intro/'+imagen_aleatoria+'.jpg");
$('#slides').superslides('start');
});
$('#entra_mouse').on('mouseleave', function() {
$('#slides').superslides('stop');
$('#slides').css('display','none');
});
});
</script>
The problem is when the mouse enters ($('#entra_mouse').on('mouseenter', function() {) always show image 1.jpg and not the random.
How I can fix it? =(
Thanks.

Hej!
You can write $('#slides').data('superslides').animate(something).
In my case I have a gallery and when you click on a specific image on get the slide show on a overlay that slides from the top. I get the current index of the thumbnail clicked and animated the slideshow to match with the thumbnail:
$( thumbnail ).click(function() {
var current = $(thumbnail).parent().children('a').index(this);
$('#slides').data('superslides').animate(current);
});
Although I have to say that is not ideal, since I would like to go to a specific slide without animating the action. I haven't find a way to do so.
I hope that helps you! Good Luck!

How can I create several javascript image buttons?

I am new at creating websites in HTML. I use free for all SeaMonkey software. So, I want to create several image buttons which would change when user moves the mouse over the image. I already have created 3 images for the different stages of each button (normal, active and clicked). I wrote this code for the first button:
<body>
<a href="first.html" onmouseover="return changeImage(jsbutton)" onmouseout="return changeImageBack(jsbutton)">
<img name="jsbutton" src="first normal.png" alt="first">
<script type="text/javascript">
function changeImage() {
document.images["jsbutton"].src= "first active.png";
return true;
}
function changeImageBack() {
document.images["jsbutton"].src = "first normal.png";
return true;
}
</script>
</a>
</body>
And it works. But when I did the same for second button, it didn't work and in addition to that, the first one has stopped working too. What do I have to change to make it work properly?
Update:
For second button I wrote:
<a href="second.html" onmouseover="return changeImage(jsbutton)"
onmouseout="return changeImageBack(jsbutton)">
<img name="jsbutton" src="second normal.png" alt="second">
<script type="text/javascript">
function changeImage()
{
document.images["jsbutton"].src= "second active.png";
return true;
}
function changeImageBack()
{
document.images["jsbutton"].src = "second normal.png";
return true;
}
</script> </a>
</body>

You are using the same "name" attribute i.e. jsbutton for the both the images. Use different name attributes. Also css :hover is a better way to do this problem.

Your JavaScript is failing because you are using the same name attribute for both images. Each element must have a unique name.
That being said, the functionality you are after is already built in to CSS, so unless you have a specific requirement for this to be JavaScript, this is a problem far better solved in CSS, using :hover.
So in your html:
In your CSS:
#firstButton {
background-image: url('first normal.png');
display:block;
height: [height of img];
width: [width of img];
}
#firstButton:visited {background-image: url('first visited.png'); }
#firstButton:hover { background-image: url('first active.png'); }
And you are done! No use recreating functionality already built in to CSS!

Well you can also use inline javascript for this purpose as it is pretty simple:
<a href="first.html" >
<img onmouseover="this.src = 'second active.png'; " src="second normal.png" onmouseout="this.src = 'second normal.png'; " alt="first" />
</a>
Here is the Demo , in which I used some random images urls
Hope this helps.