I'm using a lovely Lightbox plugin that requires the following piece of code per image
<a href="images/portfolio/full/1.jpg"
data-target="flare"
data-flare-plugin="shutter"
data-flare-scale="fit"
data-flare-gallery="portfolio"
data-flare-thumb="images/portfolio/thumbs/1.jpg"
data-flare-bw="images/portfolio/bw/1.jpg"
class="kleur multiple">
<img src="images/portfolio/thumbs/1.jpg" width="375px" height="250px" />
</a>
And I would like to write, together with some of you, a piece of Javascript/jQuery script that elminates writing some of the lines of the above piece of code.
Let me explain: The
- full image (href),
- blackwhite version (data-flare-bw=""),
- lightbox thumb (data-flare-thumb="")
- and the page thumb (<img src=""/>)
all have one thing in common: The filename is identical, only the path differs from eachother. So I would like to write/have a script that, based upon a var it automatically writes those lines of code. Not only the SRC, but also the attribute itself, so the href="", data-flare-bw="", data-flare-thumb="" and the <image src=""/>
As I'm not a Jquery master, i'll try to write down the code that, I'd think somewhat give you guys an idea of what should come:
$function(InsertAttributesAutomaticcly() {
var filenames = $('#container a').attr('data-flare-title', this')
$('#container a').each(function() {
$(this).append('href', 'images/portfolio/full/' + 'filenames' + '.jpg');
$(this).append('data-flare-bw', 'images/portfolio/blackwhite/' + 'filenames' + '.jpg');
$(this).append('data-flare-thumb', 'images/portfolio/thumb/' + 'filenames' + '.jpg');
$(this).html('<img src=" 'images/portfolio/thumb/' + 'filenames' + '.jpg'">');
});
});
Let me explain the code:
It searches within #container for a and then appends the href, data-flare-thumb, data-flare-bw tag to it, with the src/url/href image location, which would be + var (identical to data-flare-title="") + .jpg.
After inserting those three attributes, it inserts a <img> within the a tag, with an src of <path> + var (as before) + '.jpg'
I'm pretty sure this isn't that hard to write, but I'm not that skilled to create a working piece of script, sadly.
Thanks guys!
Bonus task: Those who succesfully write a piece of code above, including a script that tracks the size of the thumb (width + height) and writes that, next to the , will get a beer from me!
Granted that you have such links for example:
<div id="container">
</div>
This would be a viable approach:
$(function(){
$('#container a').each(function(){
var $link = $(this),
title = $link.data('flare-title');
$link.attr('href', 'images/portfolio/full/' + title);
$link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
$link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);
$link.append($('<img>', {
src : 'images/portfolio/thumbs/' + title,
width : '375px',
height : '250px'
}));
});
});
Edit: see fiddle.
Related
I'm creating a Chrome extension for a browser game and one of the features I'd like to add is a floating "latest posts from the forum" window to the right of the game. I've gotten it displaying the way I want it to but, all of the links pulled from the forum are shortened and don't include the full URL. When I click on one of the links it tries to go to that page on the games site rather than the forum site. What I'd like is for my code to fix the URL as well as add a target blank attribute so the links open in a new page/tab. My existing code is below.
$(function(){
var hzsforumpostsss = document.getElementById('latestpostsHZ');
hzsforumpostsss.insertAdjacentHTML('afterend', '<div><div id=\"hzlatestforumss\" style=\"background-color: rgba(0, 110, 187, 0.9);position:absolute;left:50%;width:280px;margin-left:390px;font-size:9pt;display:block;overflow:auto;\"></div></div>');
$('#hzlatestforumss').load('https://cors-anywhere.herokuapp.com/http://heroes-rising-forum.2349640.n4.nabble.com/');
})
Since you're just loading the content directly into your div with some AJAX, you're going to need to loop through all the links in the div and prepend the hostname to the ones which are relative. Your mix of jQuery and vanilla JS is a little confusing, but I'll just stick to vanilla JS for my example code.
[...document.getElementById('hzlatestforumss').getElementsByTagName('a')].forEach(anchor => {
if (anchor.href && !anchor.href.includes('://')) {
if (!anchor.href.startsWith('/')) { anchor.href = '/' + anchor.href; }
anchor.href = 'http://heroes-rising-forum.2349640.n4.nabble.com' + anchor.href;
}
});
You can also add the _blank target in the same loop if you want.
THANK YOU for getting me on the right track! The code I ended up with is below.
$(function(){
var hzsforumpostsss = document.getElementById('latestpostsHZ');
hzsforumpostsss.insertAdjacentHTML('afterend', '<div><div id=\"hzlatestforumss\"'+
'style=\"background-color: rgba(0, 110, 187, 0.9);position:absolute;left:50%;width:280px;margin-left:390px;display:block;overflow:auto;\"></div></div>');
$('#hzlatestforumss').load('https://cors-anywhere.herokuapp.com/http://heroes-rising-forum.2349640.n4.nabble.com/');
setTimeout(function(){
$('a[href*="/"]').each(function(){
var current = $(this).attr("href");
$(this).attr("href", "http://heroes-rising-forum.2349640.n4.nabble.com" + current);
$(this).attr("target", "_blank");
});
},2000);
})
Something like this?
$(function(){
var hzsforumpostsss = document.getElementById('latestpostsHZ');
hzsforumpostsss.insertAdjacentHTML('afterend', '<div class="HideFJcontainer" style=\"position:absolute;left:50%;width:280px;margin-left:390px;display:block;overflow:auto;\">'+
'<input type="checkbox" class="HideFJforum"> Hide/Show Forum<div id=\"hzlatestforumss\"></div></div>');
$('#hzlatestforumss').load('https://cors-anywhere.herokuapp.com/http://heroes-rising-forum.2349640.n4.nabble.com/',
function(){
$('a[href*="/"]').each(function(){
var current = $(this).attr("href");
$(this).attr("href", "http://heroes-rising-forum.2349640.n4.nabble.com" + current);
$(this).attr("target", "_blank");
});
} );
I'm looking for some help writing a javascript snippet that will DYNAMICALLY update a div style= "background-image:url..." to match the a href above it. This is on a portfolio website, so this is a gallery where all the images are live at once. I need the snippet to run through each individual a href and nested div underneath it and have them match, unique to each image (Don't want a page of the same picture 20 times)
I'm just starting to learn JS, so I've been struggling with this one. Here's the html.
<a id ="tobematched" href="imgs/galleryphotos/1.jpg">
This href should from above should be copied to the div style url below.
<div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>
This is what it looks like as a whole...
<a id ="tobematched" href="imgs/galleryphotos/1.jpg">
<div id ="matcher" class="img-container" style="background-image: url('imgs/notcorrect/currently.jpg');"></div>
</a>
Any help would be greatly appreciated!
This is what I'm thinking, so far...
function abc() {
var a = document.getElementById("tobematched").
var b = document.getElementById("matcher").style.backgroundImage;
}
Not sure where to go from here, since I don't know how to grab the href... I think I'm on the right track.
You can use a combination of querySelector() and the .href property to get what you need:
var targetDiv = document.querySelector('#matcher');
var url = targetDiv.parentNode.href;
targetDiv.style.backgroundImage = 'url(' + url + ')';
Alternatively you can use:
var url = document.querySelector('#tobematched').href
This second option does not depend on the structure of the document, but causes JS to look through the whole document again.
If you were using jQuery:
var url = $('#tobematched')attr('href');
$('#matcher').css('background-image', 'url(' + url + ')');
Live Example
Edit: As per the further description by OP in the comments, here is the code you actually need:
var targetDivs = document.querySelectorAll('.img-container');
for (var i = 0; i < targetDivs.length; i++) {
var url = targetDivs[i].parentNode.href;
targetDivs[i].style.backgroundImage = 'url(' + url + ')';
}
I have a function in which when the function is called I need to have text and an image pop up. My javascript is:
function Upload(){
if(value !- ''){
$("#divValue").html("Uploaded: " + //i need to add an image here );
}
So where it says //I need to add an image here, this is where my image, lets say its tire.gif, needs to be added so when the javascript is called it displays the text and image together.
you can use document.createElement method to create a img Object and simply set the source and optional height and width, then add it to your div using "append":
var img = document.createElement('img')
img.src = //URL to your image
$(img).css('width','50px'); //set the width (optional)
$(img).css('height','50px'); //set the height (optional)
//finally append the newly created image object to your "DivValue"
$("#divValue").append(img);
Can you try this,
function Upload(){
var value="some value";
if(value != ''){
$("#divValue").html("Uploaded: <img src='../images/tire.gif' />" );
}
}
It is actually pretty straight forward. You just need to pass the tag inside the string that will replace the html.
Check this jsFiddle
But you just need to do:
$("#divValue").html("Uploaded: <img src=' PATH_TO tire.gif ' /> ");
Watch the difference between " and ' to avoid syntax problems.
Cheers.
You mean like this?
$("#divValue").html('Uploaded: ' + '<img src="image.jpg" alt=""/>');
I am using onClick functionality for my buttons. My button code looks like this:
<a onClick="fadeNext('#myDIV1',500);">Button 1</a>
<a onClick="fadeNext('#myDIV2',500);">Button 2</a>
My JS Function looks like this:
function fadeNext(selectedId, speed) {
var containerID = '#imageSwap';
var vis = ($(containerID + ' div:visible').length > 0) ? $(containerID + ' div:visible').eq(0) : $(containerID + ' div').eq(0);
var next = $(selectedId);
vis.fadeOut(speed);
next.fadeIn(speed);
}
This fades the content correctly and works great, but Video content (Vimeo) still plays when its not visible. Tried this JS, but still no luck:
function fadeNext(selectedId, speed) {
var containerID = '#imageSwap';
var vis = ($(containerID + ' div:visible').length > 0) ? $(containerID + ' div:visible').eq(0) : $(containerID + ' div').eq(0);
var next = $(selectedId);
vis.fadeOut(speed, function() {
$(this).empty().show();
});
next.fadeIn(speed);
}
With this JS, the content no longer fades out or empties.
I'm a JS rookie and having trouble getting the empty() code to work. The main reason for this is that my DIV will be containing videos (Vimeo). When the user clicks to change content, I'd like for the videos to be unloaded, so the video/sound no longer plays.
Any help / advice would be appreciated!
Checkout my fork of your fiddle: http://jsfiddle.net/tutanramen/umJQ9/16/
I added a link to an external resource: https://raw.github.com/vimeo/player-api/master/javascript/froogaloop.js
I then gave each iframe an id (v1 and v2 but they are not used in this fiddle) and a class of player.
And then added this to fadeNext:
$(".player").each(function() {
$f($(this)[0]).api("pause");
});
Now when you click to select the other video it actually pauses all the videos.
I'm trying to add some html markup to the WYSIWYG CLEditor from outside of the editor itself using jQuery.
So far I have...
$('.add-image').click(
function()
{
theurl = $(this).text();
theimage = '<img src="' + theurl + '" />';
// Now What?
}
);
But I'm at a loss as to how to add the string in to the WYSIWYG and it's starting to drive me crazy!
This will overwrite:
$("#inputID").val(theimage);
$("#inputID").cleditor()[0].updateFrame();
This will append:
currentval = $("#inputID").val();
$("#inputID").val(theimage);
$("#inputID").val(currentval + theimage);
Or maybe try this:
$('#inputID').val('new text data').blur();
Where inputID is the ID of your CLEditor input.
Also, this has some discussion around this:
CLEditor dynamic adding text
Just made 2 small edits to CCCasons solution to make it work as intended.
$('.add-image').click(
function()
{
theurl = $(this).text();
theimage = '<img src="' + theurl + '" /><br/>';
// Get the current value of the textarea otherwise it will be overwritten
currentval = $("textarea.wysiwyg").val();
$("textarea.wysiwyg").val(currentval + theimage);
$("textarea.wysiwyg").cleditor()[0].updateFrame();
}
);
1) Added a line break to the end of the inserted link. Otherwise when you try to type in the wysiwyg after adding the image it inputs inside the link.
2) Grabbed the current value of the textarea first to stop it being overwritten by the image.
Again, thanks a lot to CCCason!