We Keep Coding

Going from a zoom in picture >> open a new tab

Infant coder here, used a template for my site where I wanted to showcase my work. The problem is the UX is really bad; in my portfolio section, I want the users to click on one of the images so it opens a new tab, instead of zoom in on a photo. I've tried to modify the JS and create a new function new tab but when I do that it stops all the other scrips on the page and no info shows up. Maybe someone on here can help? Here's the link to the template I've used: https://templateflip.com/templates/super-folio/
here's the part of the code that's tripping me up:
/**
* Big Picture Popup for Photo Gallary
*/
document.querySelectorAll(".bp-gallery a").forEach((function(e) {
var caption = e.querySelector('figcaption')
var img = e.querySelector('img')
// set the link present on the item to the caption in full view
img.dataset.caption = '<a class="link-light" target="_blank" href="' + e.href + '">' + caption.innerHTML + '</a>';
window.console.log(caption, img)
e.addEventListener("click", (function(t){
t.preventDefault();
BigPicture({
el: t.target,
gallery: '.bp-gallery',
})
})
)
}))
When I changed it, I did:
/**
* Big Picture Popup for Photo Gallary
*/
document.querySelectorAll(".bp-gallery a").forEach((function(e) {
var caption = e.querySelector('figcaption')
var img = e.querySelector('img')
function NewTab() {
window.open(
"a", "_blank");
)
}))
Which worked, but made all of the other text on the page disappear or unresponsive.
Any help you could provide would be great!

External Play Pause Button Swap SVG & Text on State Change

I have an external button below the playback window used to toggle play and pause, which has a CSS SVG background image with the following code, works great:
<a onclick="jwplayer().play();" class="jwp-btn jwp-btn-icon-pl">Play</a>
What I want to do is a state change, so that if the "> Play" is displayed on the button, and the user clicks the button to play, that the SVG, and text swaps to "|| Pause" (using a different SVG and text). And then reverses back if the button is clicked again.
I suspect that this will use JavaScript (which I'm OK with, jQuery is OK too), and jwplayer().on('play') and jwplayer().on('pause') event triggers. The SVG icon does not have to be in CSS.
But I'm at a loss as to how to achieve this.
Here's the player code (using a playlist as well):
<script>
var playerInstance = jwplayer("containerpreview");
playerInstance.setup({
//file: "//content.jwplatform.com/videos/12345.mp4",
//image: "//content.jwplatform.com/thumbs23456.jpg",
//playlist: "//content.jwplatform.com/feeds/123.rss",
playlist: "//cdn.jwplayer.com/v2/playlists/222?format=mrss",
displaytitle: false,
width: "100%",
aspectratio: "16:9"
});
var list = document.getElementById("list");
var html = list.innerHTML;
playerInstance.on('ready',function(){
var playlist = playerInstance.getPlaylist();
for (var index=0;index<playlist.length;index++){
var playindex = index +1;
html += "<li><span class='dropt' title='"+playlist[index].title+"'><a href='javascript:playThis("+index+")'><img height='75' width='120' src='" + playlist[index].image + "'</img></br>"+playlist[index].title+"</a></br><span style='width:500px;'</span></span></li>"
list.innerHTML = html;
}
});
function playThis(index) {
playerInstance.playlistItem(index);
}
</script>

You didn't provide any HTML, Js code about your file (just a single a tag is not enough), but this will give you an idea about how you can do this:
js/jQuery:
jwplayer("containerpreview").on('play', function(){
$('.jwp-btn').empty().html("Your (Pause)SVG Element");
});
jwplayer("containerpreview").on('pause', function(){
$('.jwp-btn').empty().html("Your (Play)SVG Element");
});

Change class on multiple img in array

This is my first post here, I always found solutions on this page, so thank you for that.
I have a problem with .removeClass and .addClass in my last program.
I load multiple pictures into array Frames and I want change all (previous-image) to (current-image) in frames[0]. Here is my code, it is change class only on second image. Here is code:
function loadImage() {
// Creates a new <li>
var li = document.createElement("li");
// Generates the image file name using the incremented "loadedImages" variable
var imageName = "graphics/img/Dodge_Viper_SRT10_2010_360_720_50-" + (loadedImages + 1) + ".jpg";
var imageName1 = "graphics/img/Dodge_Viper_SRT10_2010_360_720_50-" + (loadedImages + 1) + ".jpg";
/*
Creates a new <img> and sets its src attribute to point to the file name we generated.
It also hides the image by applying the "previous-image" CSS class to it.
The image then is added to the <li>.
*/
var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li);
// We add the newly added image object (returned by jQuery) to the "frames" array.
frames.push(image);
// We add the <li> to the <ol>
$images.append(li);
/*
Adds the "load" event handler to the new image.
When the event triggers it calls the "imageLoaded" function.
*/
$(image).load(function() {
imageLoaded();
});
};
function imageLoaded() {
// Increments the value of the "loadedImages" variable
loadedImages++;
// Updates the preloader percentage text
$("#spinner span").text(Math.floor(loadedImages / totalFrames * 100) + "%");
// Checks if the currently loaded image is the last one in the sequence...
if (loadedImages == totalFrames) {
// ...if so, it makes the first image in the sequence to be visible by removing the "previous-image" class and applying the "current-image" on it
frames[0].removeClass("previous-image").addClass("current-image");
/*
Displays the image slider by using the jQuery "fadeOut" animation and its complete event handler.
When the preloader is completely faded, it stops the preloader rendering and calls the "showThreesixty" function to display the images.
*/
$("#spinner").fadeOut("slow", function() {
spinner.hide();
showThreesixty();
});
} else {
// ...if not, Loads the next image in the sequence
loadImage();
}
};
This is, how it looks in browser:
<ol><li><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="previous-image"><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="light-image current-image"></li></ol>
This is, what I want:
<ol><li><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="current-image"><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="light-image current-image"></li></ol>
When I change this
var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li);
to this
var image = $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li) && $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li);
it still change only second img. Any help?

var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li);
is not doing what you think it is. It's only using the second element you declare. They both get appended to the page (because the appendTo method runs), but && is a logical operator, it's not used for concatenation, so the variable "image" only contains the second image you declared.
This will work instead:
var image = $('<img>', { "src": imageName, "class": "previous-image" });
image = image.add($('<img>', { "src": imageName1, "class": "previous-image light-image" }));
image.appendTo(li);

If you are just trying to replace all the previous-image classes with current image then you can do this:
$('img.previous-image').each(function(){
$(this).addClass("current-image").removeClass("previous-image");
});

How to make Pinterest button grab a real size blogger image instead a thumbnail

I used this Pinterest button on my blog
<li><a class='pinterest share-tooltip share-tooltip-top' data-share-tooltip='Share on Pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
as you can see I'm using data:post.firstImageUrl as the source of the image ... but the problem is i made my fist image doesn't show in a full size only a thumbnail (medium size) ... so when i used this data:post.firstImageUrl ... the image that being shared only a thumbnail not the real one
here is the sample of thumbnail URL which i got from data:post.firstImageUrl
https://3.bp.blogspot.com/-W-g2qYS-Kh0/V5gs0FvhpKI/AAAAAAAAFSY/yh_3p00aSA4-fRa65NH4cQ83iEngZhDeACLcB/s640/BMW-M5-30-Jahre-2014-1.jpg
and here is the full size image URL that i want
https://3.bp.blogspot.com/-W-g2qYS-Kh0/V5gs0FvhpKI/AAAAAAAAFSY/yh_3p00aSA4-fRa65NH4cQ83iEngZhDeACLcB/s1600/BMW-M5-30-Jahre-2014-1.jpg
as you can see the different only come to this part xxx://xxx/xxx/s640/xxx and xxx://xxx/xxx/s1600/xxx ...
my question is how do i change this URL part s640 into this s1600 and how to assign it into my pinterest button ?
i had been seen someone using a JavaScript to change this URL part /s640/, he used it for auto resize thumbnail, I'm not familiar with JavaScript so I'm not really understand it, here is the code
img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" alt="'+post_title+'"/

You can use script from this pastie. But it need a bit change.
<script type='text/javascript'>
//<![CDATA[
function thumbnail_resize(image_url) {
var image_size = 1600;
image_tag = image_url.replace('/s640/','/s' + image_size + '/');
if(image_url != "") {
return image_tag;
} else {
return "";
}
}
//]]>
</script>
Here we replaced the URL of image.
<script type='text/javascript'>document.write('<a class="pinterest share-tooltip share-tooltip-top" data-share-tooltip="Share on Pinterest" href="http://pinterest.com/pin/create/button/?url=<data:post.url/>&media=' + thumbnail_resize("<data:post.firstImageUrl/>") + '&description=<data:post.title/>">PING</a>');</script>
And here we pasted the link via JavaScript.

JQuery Image Gallery - Selected Images Temporarily Changes Layout

I'm trying to create a simple Ecommerce product gallery. Whenever the user clicks the thumbnail the images load correctly, but for a second the layout will shift positions because the image is swapping with the selected image. Would anybody know a way to clean up my code where this does not happen? I'm new to Jquery, so i'm probably not doing this the right way.
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
Here is a Demo

Don't hide #image instead the img inside it.
And i have added fadeOut instead of hiding to make it look more smooth. Then do fadeIn in the callback of fadeOut
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image img').fadeOut("slow", function(){
$('#image').html('<img src="' + image + '"/>');
$('#image').fadeIn('slow');
});
return false;
});
});