Take a look at my code snippet below:
<a href="image_link1">
<img src="image_link1"></img>
</a>
I am facing a challenge where I want the image link to be the same as the href (so when the image is clicked, it opens in a popup of the same image). However, I do not want to directly use "image_link1" in the href attribute. I am looking for suggestions or ideas on how to achieve this. Feel free to provide solutions even if they involve using JavaScript.
For a demonstration on how to open a pop-up of the same image, feel free to check out this example
<img class='img' src="http://www.petelepage.com/assets/gela1.png" onclick="ChangeUrl()" id="image1">
<div id="myDialog">
<img class='img' src="http://www.petelepage.com/assets/gela1.png">
</div>
<script>
function ChangeUrl(){
$("#myDialog").dialog("open")
}
$("#myDialog").dialog({
autoOpen : false,
modal : true,
});
</script>
Give this a shot
$(document).ready(function(){
$('a').attr('src',$('img').attr('href'))
});
For a solution, you can check out this link: http://plnkr.co/edit/gjEou8OwWDrR5EmFOafm?p=preview
$('a').on('click', function(){
$(this).attr('href',$(this).find('img').attr('src'));
})
It's a bit unclear what the issue is, but here's a possible solution:
<div class="image-link-container">
<a href="#" class="pic"> <!--using a class-->
<img src="image_link1"></img>
</a>
</div>
<script>
$(document).ready(function(){
$('.pic').each(function(){ // For each .pic
var url = $(this).find('img').attr('src'); // Get src
$(this).attr("href",url); // Set href
});
});
</script>
If you prefer not using the a-tag:
$('img').on('click',function(){
window.location.href = $(this).attr('src');
});
When both links are identical, there is no need to include both tags.
You can simply use the following code:
<a href="image_link1"> </a>
<script>
var Img = $('a').attr('href');
$('a').prepend("<img src="+Img+">");
</script>
I've been attempting to create a basic sorting function, but it doesn't seem to be functioning correctly. var Main = { data() { return { tableData: [{ value: '1.799,37', name: 'Tom 3' }, { ...
I recently started working with Angular and decided to use the angular-file-upload project from GitHub here. I'm currently in the process of setting up the backend for my application, but I'd like to be able to display dropped files locally in th ...
Currently, I am in the process of creating an about text for a profile that will include an option to expand or collapse based on its length. To achieve this, I am utilizing a function from the main home component: <AboutText text={aboutData}/> Abo ...
I have a basic jQuery modal code that uses grey as the default color. How can I customize this to create a colorful toolbox, for example changing the color from grey to blue? Also, how can I use this script for multiple dialogs, like setting #dialog1 to be ...
Recently diving into the world of Angular, I find myself tackling the concept of routing. However, as I try to wrap my head around it, I can't help but notice its similarities with AJAX. Both seem to be about loading specific parts of HTML from a serv ...
Encountering this issue when attempting to start my express server with node server.js, and I'm struggling to identify the root cause. Despite updating my app with express 4.0, I can't seem to pinpoint the error. Can anyone assist in identifying ...
I need help figuring out how to properly chain promises for a "find or create" functionality using mongodb/mongoose. So far, I've attempted the following: userSchema.statics.findByFacebookIdOrCreate = function(facebookId, name, email) { var self = ...
Currently, I am working on an Angular application that presents movies in a table format with search input and dropdown filter by genres. As I work on this project, my main focus is finding a way to filter search results based on both the text entered in t ...
I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows: var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.o ...
I've been working on optimizing the loading speed of fonts on my website, so I added the following: <link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}" as="font" type="fo ...
How can I create a non-reloading div at the top of my website that contains an MP3 player which plays continuously while users browse through the site? I am working with Joomla and would like to avoid using Iframes for search engine optimization purposes ...
I am in the process of developing my own personalized Electron app for managing other applications on my device. One issue I have encountered is the inability to create a link that opens my own .exe applications. I have attempted various methods without su ...
Within my div-containers, I have a collection of div-elements. I am looking to identify the parent number of the div-element that is currently being dragged For example, if Skyler White is being dragged, the expected output should be "0" as it is from the ...
Hello everyone! I'm new here and I need some help. I want to change the background of a td element without losing the CSS styling that is currently applied to it. Right now, the background is repeating and tiling. Below is the script I am using: $ ...
var string = "/\test\test1\test.jpg"; Looking for a way to swap out /\ with just \ using JavaScript? ...
I am facing an error when trying to animate a model with rotation or position in my code. I attempted to create an init function to run everything, but it did not resolve the issue. The error only appears during animation; once the animation stops, the e ...
After setting up my API with the AWS Api Gateway Service, I am now looking to integrate the javascript SDK into a basic webpage. The provided instructions for using the javascript SDK can be found here. However, they mention importing a js file named apig ...
customTag.php A unique HTML tag generator that creates custom HTML codes based on user input. <?php function generateTag($tagName, $content = NULL, array $attributes = NULL) { $html = "<$tagName"; if (!($attributes === NULL ...
Within this inquiry, the process involves saving images uploaded via multipart/form-data parsers in a temporary folder using const tempPath = req.file.path. Subsequently, these images are then transferred to a designated directory using const targetPath = ...
I have a functioning sample of a scrollable with item numbers 1 - 24. I am trying to retrieve the value of the current item, but my attempts to use alert have failed. How can this be achieved? Here is my code: UPDATE QUESTION: I managed to obtain the inde ...