We Keep Coding

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>

reading a viarble in the document

This seems like it should be simple i have a menu using Angular that sets a variable "active"
<a class="about" href="#" ng-click="active='About Me'">About Me</a>
and a Paragraph that will output whatever that active name is
<p ng-show="active">You chose <b>{{active}}</b></p>
What i can't figure out is now to set up a if check wither if "$active/{{active}} = "about me"" display this block of code so each link will fill the body with different content.
Any thoughts?

To achieve expected result, use below option
HTML:
<div ng-app="test" ng-controller="testCtrl">
<a class="about" href="#" ng-click="active='About Me'">About Me</a>
<a class="about" href="#" ng-click="active='Home'">Home</a>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
})
Make sure that the active scope variable is inside the tag having controller
code sample- https://codepen.io/nagasai/pen/wmBMjd

Insert <a> Into a div generated by a plugin with javascript or jQuery

I am working with a plugin that provides IDX data for listings on a WordPress website. The plugin uses jQuery to query a database for information that it displays on the page. The plugin is not very customizable past simple styling and I would like to insert a link to save to favorites
The link for saving to favorites can be found by viewing this page:
http://angelandpatty.com/homes-for-sale-details/8635-La-Entrada-Avenue-Whittier-CA-90605/PW14217291/306/
All the property details pages have the "save to favorites" button at the top of the page. This is what I found with the inspector:
<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>
I am assuming the data-target is what is causing the button to take action.
What I would like to do is find a way to insert this same button, perhaps with a different icon like a thumbs up or a star, into the property stubs.
The property stubs are viewable on pages like this:
http://angelandpatty.com/homes-for-sale-in-friendly-hills/
I would like to find a way to insert this possibly after #ihf-main-container .col-xs-9
If there is any way to do this with Javascript or with jQuery I sure would like to know.
Thank you for all of your assistance. I tried searching for some situation like this but was unlucky

Are you looking for the following answer?
var button = $('<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>');
$('#ihf-main-container .col-xs-9:first').after(button);
See: http://api.jquery.com/after/
.after(content [, content ] )
Description: Insert content, specified by the parameter, after each element in the set of matched elements.
You may need to initialize the button as required.

Fetching value from tag without using id or class

<div class="typeahead-result">
<ul class="typeahead-list">
<li>
<a data-index="0" data-group="Restaurant" href="javascript:;"><strong>Cafe</strong> Hollywood <small style="color:#999;">Restaurant</small></a>
</li>
<li>
<a data-index="1" data-group="Estb" href="javascript:;"><strong>cafe</strong><small style="color:#999;">Estb</small></a>
</li>
</ul>
</div>
Here I am having the text value of <a> tag that is "Cafe Hollywood" and I want its attribute value for data-group="?"

You can use:
$('[data-group="Estb"] small').text();

Instead of <small>, you could use <span id="spanId" style="font-size:small">
Then you would be able to call the span in your javascript. Yes, your version is a bit shorter, but in the long run you want to avoid deprecated tags like <small>, <underline>, <b>, etc exactly because of problems like this

Yes, you can directly get the value of each small tag, as follows:
var my_small_value;
$('li').getChildren().find('small').click(function(){
my_small_value = this.text();
alert(my_small_value);
});

Try this
alert($("li").eq(1).find("a").attr("data-group"));

Replacing – character using Javascript or JQuery

I need to replace the dash in a title on by site with a span tag and line break to break to title over two lines.
Unfortunately I don't have access to do this in the PHP :(
The below statement seems to do this. Although with bugs as it's making this change to the character throughout the page.
document.body.innerHTML = document.body.innerHTML.replace(/\u2013/g, "</span><br /><span>");
The jQuery solution I tried below, works but sometimes the element would have a visibility hidden on the element!
$("#events h3 a").each(function() {
$(this).html($(this).html().replace(/\u2013/g,"</span><br /><span>"));
});
Ideally I would like to use the pure JavaScript version above but need help navigating to the Events Link.
#events h3 a
Thanks anybody who can help, I have hunted for a solution everywhere.
This is an example of the page structure. And explains why the span close and start are back to front in the code excerpt. This is so each half can be styled when on separate lines.
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title - On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title - On Every Monday</span>
</a>
</h3>
</li>
</ul>

It seems so simple, is this a trick question? If it as simple as i thought try this.
$(function () {
$("#events h3 a").each(function () {
$(this).html($(this).html().split(" - ").join("</span><br/><span>"));
});
});

document.getElementById('events').innerHTML

I am not sure why you do the special encoding in your regex (maybe something I am missing). Anyway, this works
$("#events h3 a span").each(function() {
$(this).html($(this).html().replace("-","</span><br /><span>"));
});

Here's a JavaScript way to do it
jsfiddle
var replaceDashes = function() {
var body = document.getElementsByTagName('body')[0];
// copied an – character to use in the replace
body.innerHTML = body.innerHTML.replace(/ – /g, '</span><br /><span>');
};
replaceDashes();

Try using u002d instead of u2013.
$("#events h3 a").each(function() {
$(this)
.html($(this)
.html()
.replace(/\u002d/g, "<span /><br /><span>"));
});
updated JavaScript code
Update
Interestingly u002d refers to ASCII hyphen and u2013 refers to the en dash. It appears "-" is seen as the ASCII hyphen, and not as the en dash. Honestly, it's quite confusing since they look alike :-S.
Here's a web page for the special characters for commonly confused with, like hyphen and en dash.
So, I've updated the code, replacing "-" with "& # x2013" [SO sanitizes my entry :)] in the html and it will work as you expected.
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title &#x2013 On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title &#x2013 On Every Monday</span>
</a>
</h3>
</li>
</ul>
Unicode version
Alternately, you may use "& ndash ;" [Again, SO sanitizes my entry] instead of the Unicode form
<ul id="events">
<li>
<h3>
<a href="http://example.com">
<span>First Events Title – On Every Sunday</span>
</a>
</h3>
</li>
<li>
<h3>
<a href="http://example.com">
<span>Second Events Title – On Every Monday</span>
</a>
</h3>
</li>
</ul>
ndash'ed version