I have this Problem.
I am using Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/)
And now I want to add a Lightbox with multiple thumbnails inside the dropout.
Grid.js has an function where it puts all the content into the dropout, so I thought I may use this function.
this.$href = $('<div class="image-row"><div class="image-set"><a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."></div>');
I shortenend the code, its very long (not very pretty I admitt), now it shows on the dropout, but I need for each Dropout a new set of images.
Is there any way I can fetch the href="" data out of the HTML? Or another, more practical way to do it?
I admit I have absolutly no clue of JavaScript.... I hope someone can help me! Thanks in Advance
In jQuery you can use $('.example-image-link').attr('href');
Related
I don't know why this don't work, only the first one charge my img the others no.
1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" />
2. <img :src="'../assets/batatas.jpg'" :alt="item.title" />
3. <img :src="item.img" :alt="item.title" />
I want to use the las one, because i use my own json to charge the iformation, but when I try to put the img only works the first one, in and when i watch the web info i can see the first put this (src="/img/batatas.79e29299.jpg") and the two others put (src="../assets/batatas.jpg") on my web.
I'm starting to use vue and i can't find why this happends.
Welcome to StackOverflow, please make sure you search for similar questions before asking yours. Is always nice to avoid duplicates.
Here it is one question/answer that is similar to yours:
Static image src in Vue.js template
You will need the "require" since your object is dynamic and Vue needs to figure out how to map the static asset with the one generated in the build process. That's the one (src="/img/batatas.79e29299.jpg") this random number is the actual end result of the image, that will be visible to the users.
Using the require will be like saying "convert the item.img URL to the actual end-result image URL"
I change my json to img: #/assets/batatas.jpg to img: batatas.jpg and then in my component i use <img :src="require('#/assets/' + item.img)" :alt="item.title" /> and this works for me, the cassioscabral answer helps me to understand and trying to my self with this info i solvent this question, thanks to all people who coment this post for help me, I'm really grateful.
I need a copy-to-text button using a font awesome icon in a div in wordpress.
I do not want any alerts. Just a simple click.
<div class="btcTXT">text</div>
<div id="cpy" class="cpy"><i class="far fa-copy"></i></div>
I am a novice so please tell me the steps I need to do.
Thank you in advance.
Give your div an id first, like so:
<div class="btcTXT" id="your-div-id">text</div>
Then write this javascript to do the trick for you!
document.getElementById("cpy").addEventListener("click", () => {
navigator.clipboard.writeText(document.getElementById("your-div-id").textContent).then(() => {
console.log('Copied to clipboard!!!');
});
});
Make sure you "enqueue/inject" your javascript to the page you're testing.
Let me know if you were able to get it to work!
What #Ruvee said is correct. You typically need to enqueue scripts on your site to make sure everything works as expected. If that isn't your cup of tea I would suggest using a plugin like Simple CSS and JS Plugin.
You can add that piece of code as a new JS file using that plugin and should work just fine.
I'm having problems trying to figure this out, specifically because I'm really new to javascript. So, I have this place in my page where I want to have a random html file that I will make in html and I will like to link to it. I want it to be randomized every time the page refreshes, because I will do lots of these html files.
So, is this possible? I've searched for answers but all of the randomized html questions I've found are about the whole page. I just want a little part of the page to be randomized, similar to the random image I have in the same webpage.
The page I'm using for testing is this one: http://vannapruebas.jcink.net/ , I would like to use the toggle that says "búsquedas" for this. So, any help? thanks and exuse my poor english!
All you have to do is make a list of all your html, then you pick one randomly with -> Getting a random value from a JavaScript array.
I used jQuery just for easier demo
var listOfHTML = ["sample/your.html","sample/another.html"];
$('#magic').on('click',function(e){
var randomHTML = listOfHTML[Math.floor(Math.random()*listOfHTML.length)];
$.get(randomHTML,function(response){
$('#yourDiv').html(response);
//do your animation when completed
});
});
<div id="yourDiv"></div> <button id="magic">búsquedas</button>
i'm trying to make the typical ecommerce site where you have different views of clothing and when you click it it becomes the main image.
I'm assuming javascript would be best suited for this? maybe Jquery will be easier?
Thanks I just need someone to point me in the right direction.
Send the various image file names along with the html code in a javascript array. Define "next" and "previous" links pointing to a javascript function that just sets the source of the <img> to the next/previous image.
Or, if you have mini previews, organize the images so that you have image0032_small.jpg for the mini preview and image0032.jpg for the big image, then set the onClick event of the mini image to a javascript function that reads the url of the mini image, removes the _small part and sets the image source of the big image to the result...
If you use a logical naming convention, where the zoom img = the small image + "_Zoom" (a.jpg > a_Zoom.jpg) in the filename, you can do it like this:
<img id="productZoom" src="productA_Zoom.jpg" /> <-- the large image
<a href="javascript:;// zoom in" onclick="loadZoom(this)">
<img id="productZoom" src="productB.jpg" /></a> <-- the thumbnail
function loadZoom(element) {
var zoomImg = $(element).children('img')[0].src.replace(".","_Zoom.")
$('#productZoom').attr('src',zoomImg)
}
There are a dozen ways to do it. I suggest you run a search on
simple gallery [your favorite coding tool]
Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.