Develop Reference

Javascript/Jquery - Get the link of a visible image

I have some modals where there are some images. I also have a download button, that should download just the shown (the only visible) image in the modal.
I tried to make that the href link of the download button is equal to the visible image href, but it it doesn't seem to work...
Here you can see the full page code, but the part that interests me is this one:
<div id="myModal_12" class="modal">
<div class="modal-content">
<div class="Slide mySlides_12">
<div class="numbertext">1 / 3</div>
<img src="uploads/IMG_4946.JPG43879.jpg" class="little_image" style="width:50%;">
</div>
<div class="Slide mySlides_12">
<div class="numbertext">2 / 3</div>
<img src="uploads/IMG_4949.JPG21730.jpg" class="little_image" style="width:50%;">
</div>
<div class="Slide mySlides_12">
<div class="numbertext">3 / 3</div>
<img src="uploads/IMG_4950.JPG72501.jpg" class="little_image" style="width:50%;">
</div>
<!-- Next/previous controls -->
<div class="input-group-btn">
<a onclick="downloadFunction(this)">Download this image</a>
</div>
<span class="close cursor" onclick="closeModal(12)">
<img src="/images/close.png">
</span>
<a class="prev" style=" display: block; " onclick="plusSlides(-1, 12)">❮</a>
<a class="next" style=" display: block; " onclick="plusSlides(1, 12)">❯</a>
</div>
</div>
</div>
<script>
function downloadFunction(linkElement) {
var little_image = document.getElementsByClassName("little_image"); // Get all the images with that class
var right_image = $(little_image).not(":hidden"); // Get just the visible image
var src = right_image.src;
linkElement.href = src; // Set the link href on the visible image src
}
</script>
The JavaScript function return an "undefined" value...
Any help is very appreciated

To get the src attribute of an element you should use the attr(<attribute>) method. Given what you are trying to do, this logic could be reduced to:
linkElement.href = $('.little_image:visible').attr('src');

As Taplar has said you can use:
linkElement.href = $(".little_image:visible").attr("src");
However, there is an issue. The jQuery function returns an array and if you added another element that fits this criteria before this element that could cause an issue. Since attr returns for the first element of that array it may not work for the proper element you wanted it to. To fix this you could write this:
linkElement.href = $(".little_image:visible")[1].getAttribute("src"); // [1] the second element

If you want to get an attribute of element you should use attr function. In your problem you need to call like this;
linkElement.href = right_image.attr('src');
In addition, if you want to set an attribute then use .attr(attribute, value) like this:
right_image.attr("src", "https://www.example.com/")

How to display page onload popup?

I am using below code for onclick popup, but I need the same popup for onload - how can I solve this problem?
<div class="app">
<div class="canvas">
Demo — Explode Modal
</div>
</div>
<div id="explode" class="ui--modal explode">
<div>
clear
<h4>Boooooom!!!</h4>
<img src="assets/img/e2dshop.jpg" >
<!--close-->
</div>
<div class="bg">
<img src="assets/img/explode-med.gif" id="boooom">
</div>
</div>

Try this solution
<script>
jQuery('window').on('load', function(){
jQuery('#boooom').attr('src', 'assets/img/explode-med.gif');
});
</script>
As well include jQuery lib.

Try this
$(document).ready(function() {
$(".ui--button").click();
});

Remove src from all iframes and add it on click

I'm trying to remove the src values from all my iframes and then on click load the srcs to the ones matched by a selector.
Right now I have a block of code that empties the src of my iframes and creates a variable with the src info.
After that I'm trying to check if an iframe src is empty and if so, have a function that on click of a link will add the corresponding src values to the returned iframes.
The code is as follows, but the click part is not working.
Naturally I'm not sure about the IF part, as well, since the thing as a whole is not working.
$j=jQuery.noConflict();
var iframesa = $j('iframe');
iframesa.each(function() {
var srca = $j(this).attr('src');
$j(this).data('src', srca).attr('src', '');
});
$j(document).ready(function(){
if($j('iframe').attr('src') == '') {
$j('.evento-more').click(function() {
$j(this).next().children('iframe').attr('src', function() {
return $j(this).data('src');
});
});
}
});
The HTLM structure is something like this
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.youtube.com/embed/xxxx"></iframe>
</p>
</div>
<div class="slide-text">
<p>
<iframe src="https://www.soundcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.mixcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
And so on. The whole .evento-feed block gets repeated a few more times, although the content may vary
Is there anyone that can help me?

Mouseover text then Change Image not Working in IE8-below

I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>

I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>​
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.

Can't seem to get element ID

I have a list of images and I really need to get ID of each image inside my JS, but I don't know how to do that. I've tried this method, but it is returning empty string instead of ID. I tried getting it from DOM elements http://galleria.aino.se/docs/1.2/references/dom/ like $(".galleria-thumbnails img").click(function(){alert((this).id)}); but this method is not working, alert is simply not showing up. Also I did some research here http://galleria.aino.se/docs/1.2/api/methods/ and got this code, but this is showing alert of empty string.
$("#gallery").galleria({
});
myGalleria = Galleria.get(0);
myGalleria.$('thumbnails').click(function(){
alert((this).id);
});
gallery div
<div id="gallery">
<img id="someid" src="http://photoapproaches.files.wordpress.com/2010/03/helen-model-2272.jpg" />
<img id="otherid" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
</div>
Console is empty of errors, nothing is showing in console. Also this markup is working fine the gallery plugin is making DOM elements on their own, and that is very frustrating with this situation. DOM structure can be viewed here, but I will link it in here as well http://galleria.aino.se/docs/1.2/references/dom/
<div class="galleria-container">
<div class="galleria-stage">
<div class="galleria-images">
<div class="galleria-image">
<img>
</div>
<div class="galleria-image">
<img>
</div>
</div>
<div class="galleria-loader"></div>
<div class="galleria-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-right-nav"></div>
<div class="galleria-image-left-nav"></div>
</div>
</div>
<div class="galleria-thumbnails-container [ carousel ]">
<div class="galleria-thumb-nav-left [ disabled ]"></div>
<div class="galleria-thumbnails-list">
<div class="galleria-thumbnails">
<div class="galleria-image">
<img>
</div>
[...]
</div>
</div>
<div class="galleria-thumb-nav-right [ disabled ]"></div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title"></div>
<div class="galleria-info-description"></div>
<div class="galleria-info-author"></div>
</div>
</div>
<div class="galleria-tooltip"></div>
</div>

Here is a one way to access id of an element:
var currentId = $(this).attr('id');
For your case, you can try this:
myGalleria.$('thumbnails').click(function(){
alert($(this).attr('id'));
});

should it not be alert($(this).id);? (Note the $).