I'm trying to create a lightbox component in Polymer, with it's child items being multiple <img> tags. These will have an src, which is a thumbnail and a data-fullimage attribute, which will contain the path to the full size image.
In the Polymer component, I've set the on-click tag on the image content selector, and any Javascript calls using sender.xyz return the content tag, not the image tag, thus not allowing me to retrieve the path to the full image. Is there any way to get the data-fullimage of the image that is clicked, or even the src value if need be?
Polymer Component
imageClick: function(event, detail, sender)
{
console.log(sender);
}
Implementation
<paper-lightbox>
<img src="img/one.png" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" data-fullimage="img/two-large.png"></img>
</paper-lightbox>
No need to put click handlers on the img tags. Moreover this doesn't work, because they are not bound to functions in the paper-lightbox element. What you want is
event.path[0].getAttribute("data-fullimage")
But this only works if your light DOM elements consist of exactly one element. If your light DOM elements are more complex, but it should be possible to click them anywhere, use this expression instead
event.path[[].indexOf.call(event.path, sender) - 1].getAttribute("data-fullimage")
Try this
HTML:
<paper-lightbox>
<img src="img/one.png" on-tap="{{imageTap}}" data-fullimage="img/one-large.png"></img>
<img src="img/two.png" on-tap="{{imageTap}}" data-fullimage="img/two-large.png"></img>
</paper-lightbox>
JS:
imageTap: function(sender){
var fullImage = sender.target.attributes["data-fullimage"];
}
Related
I'm trying to replace the image source, but only if the image corresponds to the existing class "overview-icon--downtime". Then there's another class, "overview-icon--degraded", which I want to replace it with (or simply putting an image address, which might prove easier).
To be replaced:
<div class="page__overview">
<img class="page__overview-icon overview-icon--downtime" src="downtime_large.png">
</div>
To be replaced with:
<div class="page__overview">
<img class="page__overview-icon page__overview-icon--degraded" src="degraded_large.png">
</div>
I was thinking of this, but I'm not sure I'm heading in the right direction.
document.querySelector(".page__overview-icon overview-icon--downtime").setAttribute("img", "page__overview-icon page__overview-icon--degraded");
The image loads with the page, so I'll also need to use the AJAX at the end.
Any ideas here please? Thanks a lot in advance! :3
You are heading in the right direction.
Attributes are the things inside of the tags. In this instance, "class" and "src" are attributes of the img element.
document.querySelector will select the img element, you then need to call setAttribute('class', new class value), and setAttribute('src', new src value)
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I'm currently working on a userscript, but I have a problem.
I'm trying to replace an image with another one.
I thought I could do it this way:
$(".subforumicon.ajax_mark_read").each(function() {
$(this).html($(this).html().replace(/http:\/\/x\.hackforums\.net\/images\/modern_pl\/minion.gif/g, "http://megaviews.net/hf/designcostumizer/themes/green/minion.png"));
});
However, this will do nothing. When I paste this code in the javascript console, it just displays all img-tags with this picture:
I don't want to replace everything by using $("body").html(), as this can cause problems with the website (somehow).
Before I started working with jQuery, I used document.body.innerHTML, what caused issues on the page, but with document.getElementById() it worked, so I don't think it was my fault. ;)
I'm quite new to jQuery, so could somebody please explain me why my above code doesn't work?
It does not work because the selected elements are img and there is nothing below the img elements.. as .html() selects or sets the INSIDE content (like innerHTML). not outerHTML so you cannot access the attributes of the img element itself by this mean.
You should work on the img's src attribute as already proposed in other posts.
Use .prop()
you need $('img') as you are changing image src only.
so replace img attribute src only.
why traverse through all full html you need to focus on src property only.
$('img').prop('src', function (_, old_src) {
return old_src.replace(/http:\/\/x\.hackforums\.net\/images\/modern_pl\/minion.gif/g, "http://megaviews.net/hf/designcostumizer/themes/green/minion.png");
});
or better if you want to change all images attribute src
$('img').prop('src','http://x.hackforums.net/images/modern_pl/minion.gif');
I want to able to use fancybox with below DOM structure.
<div>
<img src="smallImageSource" rel="bigImageSource">
<img src="smallImageSource" rel="bigImageSource">
<img src="smallImageSource" rel="bigImageSource">
<div>
I want to provide big image sources in rel attributes or any other data attributes.
Why don't you just apply a container with a class specifically for fancybox.
You can then target the elements in your styling that will be fancybox only styles
Instead of changing the way of fancybox reading it, I would create a javascript that turns your dom structure into the way fancybox likes it.
for example:
$('img').each(function () {
$this = $(this);
$this.wrap('');
$this.removeAttr('rel');
});
// run fancybox
I'm using jQuery to rewrite the DOM to transform a no-JS HTML page into a JS-drive page. I've hit a glitch on transforming the image links. In the original code I have:
<div class="f">
<a href="images/Fig-03-2.png" target="_blank">
<img src="images/fig-03-2.png" alt="Fig 3.3" />
</a>
</div>
...and I want to transform it into:
<div class="f">
<a>
<img src="images/fig-03-2.png" alt="Fig 3.3" onclick="imagepop("fig-03-2.png")/>
</a>
</div>
I can't figure out how to write the onclick attribute so that it contains the img src value as imagepop's argument. I tried:
$(".f a").attr('onclick', 'imagepop(' + $(this).attr('src') + ')' );
...but $(this).attr('src') returned "undefined".
How should I fix my line of code or would it be better to read the img src attribute from inside the imagepop function?
**Note, I have not developed the page so that each div has a unique ID, and do not plan to do so. None of the elements inside the <div> tag have IDs assigned to them.
...and I want to transform it into...
For what it's worth, I wouldn't. Instead, I'd use a function like this:
$("div.f a img").click(function() {
imagepop(this.src);
return false;
});
What that line, probably wrapped in a ready handler, does is: If the user clicks the image, it does the imagepop thing and cancels the event, which (amongst other things) prevents the link from firing.
It's called progressive enhancement. JavaScript-enabled user agents will use the above, and ones without JavaScript enabled will still see and follow the link. Remember that user-agents are not just browsers, they include crawlers, spiders, etc., and yes, browsers with JavaScript disabled.
Update: If you really want to handle it at the link level (which might be more keyboard-friendly), rather than image level, then:
$("div.f a").click(function() {
var img = $(this).find("img");
if (img[0]) {
imagepop(img[0].src);
return false;
}
});
...since it's the img, not a, element that has the src. (And no need to use attr here, the src reflected property is supported by all major -- and probably all minor -- browsers.)
try this:
$('.f a').onclick(function(e){
imagepop($(this).find('img').attr('src'));
e.preventDefault();
});
Basically, it selects all of the anchors under the .f class, and applies an onclick to each of them. inside the onclick function, we reference this which is the current anchor tag, and put it through a jQuery object. That allows us to find all img elements under that anchor tag, pull it's src attribute, and run it through imagepop().