We Keep Coding

How to get innerHTML when clicking an <a> and inserting that innerHTML on another HTML page?

I have an image gallery, each gallery item has the picture, a title, and description. I want to be able to click on any of these gallery items and have a "detail" page load and fill in dynamically the image, title, and description. How can I do this?
I tried getting each of the values inside the divs with.innerHTML, but how do I "send" these values to the other HTML page?
You can see exactly what I want here:
http://madebymorro.com/web_majosecastano/nieve.html
This is the image gallery, only 1 item is active, the first one under "2008".
You can see that when you click on it, a detail page opens:
http://madebymorro.com/web_majosecastano/detalle.html
This is what I want to achieve, but not having to create a detail page manually for each one of the image gallery items. I want the detail page to fill in with the info coming from the galley HTML page.
Thanks!!!

Convert your pages into php and create only one detail page when you click on any gallery item pass the id or title of that gallery in tag and access that id using url query parameter or any other method
<div class="row">
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=1">
<img src="random-img.jpg"></img>
</a>
</div>
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=2">
<img src="random-img.jpg"></img>
</a>
</div>
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=3">
<img src="random-img.jpg"></img>
</a>
</div>
</div>
and in detail-page.php access id using query paremeter and then access result using id and print in detail page
To access id using query parameter add code in detail page like this
<?php $galleryId= $_GET['id']; ?>
here you will get gallery id

How can I add a link to an image opened in a lightbox leading to external ".html"?

I have a gallery in which the images that are clicked open in a lightbox. I want to add the option that the OPENED image can then be clicked again to link to an external page.
I already tried to wrap the tag in another tag - what was of course not successful - and was looking for some "data" code to add to the "href" line... but found nothing so far. Here is the code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox"href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I want the image link to the page where the project is described in detail BUT also want the viewer to be able to see the zoomed version of the image... Hoping for some help. Thanks

Have you tried putting the link tag inside the span?
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);">
Visit W3Schools
</span>

How to change link depending on div id?

I'm using Jcink Forums - I can style divs based on the user group which can be used as a html variable (for IDs).
How can I change the link based on the ID?
I'm assuming this cannot be done via just css and html however I'm not well-versed in JS
For Example (not the full code, just a really abridged version):
Stylesheet:
#admin .avatar {background-image:url("admin.jpg");}
#mod .avatar {background-image:url("mod.jpg");}
HTML:
<div id="<!-- |g_id| -->">
<a href="link changes based on div id">
<div class="avatar"></div>
</a>
</div>

If you can script, you can do something like (inline for demonstration, you can loop over all divs and change their links)
<div id="<!-- |g_id| -->">
<a href="whatever" onclick="this.href=this.closest('div[id]').id=='xxx'?'zzz':'yyy'">
<div class="avatar"></div>
</a>
</div>
where an ID of xxx will set the href to zzz otherwise set it to yyy

You can use setAttribute to set the link href according to the id
var ele=document.querySelectorAll("div");
Object.values(ele).forEach((e)=>{
if (e.getAttribute("id") == "abcd") {
var link = e.querySelector("a");
link.removeAttribute("href");
link.setAttribute("href", "www.link2.com");
}
})
<div id="abcd">
<a href="link1">
<div class="avatar">aa</div>
</a>

Upload image and change default image location everywhere

I have an image in a div given below that appears on every page of my website and I have a URL link available to me that contains a profile picture. I would like to replace the image src attribute and update the profile picture and make sure that it updates on every other page. Any suggestions on how I can achieve this using javascript/jquery? Kindly let me know.
Test image URL: http://www.hdrspotting.com/images/default_profile.jpg
<div id="d2c-hey-user" class="d2c-user-panel" style="display: block;">
<img src="../images/defaultHeadshot_lg.png" style="display:none;" class="pacific-header-user-img">
</div>

How to jQuery selectors, get an image's src and set it as a background-image of another element?

I'm trying to make this work with the following scenario:
My goal is to get the first image's src from the html structure bellow and then set its src value as the background-image: of another element which exists in the DOM.
The HTML output, dynamically loaded.
I've set up the Instafeed jQuery plugin in a way it outputs the following html structure: Images are dynamically loaded through Instagram API.
I want to grab the image src from the first image bellow...
<div id="instafeed">
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10375586_312675495555582_308260980_n.jpg">
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/10454019_1429094704028916_1903084125_n.jpg">
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/1530818_682625665122870_298851871_n.jpg">
</a>
</div>
</div>
...And place it as the url of the following target element .bgcover:
<div class="masthead bgcover" style="background-image: url('https://distilleryimage11-a.akamaihd.net/fdc05880f98511e2af2c22000a9e510c_7.jpg');"></div>
jQuery
The code bellow works, however, it gets the img src of one of the images in the html out and not the first one...
$( window ).load(function() {
// For each image with the class .dynamic-image on the page
$(".dynamic-image").each(function() {
// Grab the image
var image_source = $(this).attr('src');
// Set the background
$(".bgcover").css("background-image",'url('+image_source+')');
});
});
By reading the jQuery's :eq() Selector documentation, I'm now trying to learn how to use the selectors, but I'm pretty new to JS/jQuery, so I'd really appreciate any hints about making it work the right way.

The .each() function in jquery is like a loop. It will run loop through for every match. So, in your above code, ideally it is going to pick the last img tag and set its image as the background.
Instead if you used .first() function it would return the first element that it matches. This is the implementation that would work for you.
$(window).load(function () {
// For each image with the class .dynamic-image on the page
// Grab the image
var image_source = $(".dynamic-image").first().attr('src');
image_source = "url('" + image_source + "')";
// Set the background
$(".bgcover").css("background-image", image_source);
});
Hope this helps.