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!
Related
I created a menu in wordpress that both contains anchorlinks to different sections on the startpage, and links to other pages:
But when I navigate to another page (ex "Jobs"), and from there try to navigate in manu to a section on startpage - anchorlinks doesn't work because it needs the full URL to guide user back to startpage and then jump down to the section i clicked. But when I change anchorlinks to full url:
..it will allways reload, even if i'm on startpage because I have the full url. How do i create a menu that will only have section URL (ex "#meetups") on the startpage, and full URL (ex "/hip#meetups") when I'm on another page.
Can I build a javascript or PHP function for this?
I really got stuck here and will be incredibly thankful for any input
I made a jQuery function that will alter menu-link-attr/url depending on browser.location:
var x = location.pathname;
if(x === '/hip/jobs/'){
var findLink = $('.menu-item-type-custom').find('a');
for (var i = 0; i < findLink.size(); i++) {
var attri = findLink.eq(i).attr('href');
findLink.eq(i).attr('href', "http://localhost:3000/hip/" + attri);
}
} else {
console.log('error! ' + x);
}
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.
i need help with my code to make it right, all my code is fine i just need some one to edit it for me and add this few things
on the page i have video buttons, and iframe, and embed code area
when i click on video button, video 1 or video 2, the data-str will change in iframe src and in embed code area also it will get that data-str value from button to url to make it like this domain.com/test/page1.php?video=0_MfMUN_FNM
that is all fine it is as i want it. but the problem is, when i go to domain.com/test/page1.php?video=0_MfMUN_FNM it doesn't load the video that is in video 3 with data-str"0_MfMUN_FNM" it will load default one as it's on video 1 when 10 seconds are done.
so i want it to be like, when i go to domain.com/test/page1.php?video=0_MfMUN_FNM instead of domain.com/test/page1.php then video 3 most be selected because variable on url is "0_MfMUN_FNM" and after 10 seconds that should be playing instead of default one.
here's my full code on plnkr http://plnkr.co/edit/LhxRjJXBnCGKGfW4ZLWO?p=preview
here's my javascript code
<script>
$(document).ready(function() {
//action listener for video_link class
$('.video_link').click(function(e) {
e.preventDefault();
$('.frame_src').attr('src', 'https://www.youtube.com/embed/' + $(this).data('str'));
window.history.pushState({},"",window.location.origin + window.location.pathname + '?video=' + $(this).data('str'));
});
$(".frame_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE");
var t = "p9zdCra9gCE",
e = $(".embed_code").attr("data-content");
e = e.replace("[videoID]", t), $(".embed_code").html(e), $(".video_button").slideDown(), $(".video_link").click(function() {
$(".reloadframe").show();
var t = $(this).attr("data-str"),
e = "https://www.youtube.com/embed/" + t + "",
a = $(".embed_code").attr("data-content");
a = a.replace("[videoID]", t), $(".embed_code").html(a), $(".frame_src").attr("src", e), clearInterval(interval), document.querySelector(".load_video").style.display = "none", $(".frame_src").show()
})
});
</script>
I have created a custom plugin inside of tinyMCE 4. It pops up a modal window and displays images in a said directory. You pick the image, then it adds it to the content and closes the popup. I have it inserting the image into the content, but I can't seem to close the popup. I've tried many different ways and none of them work.
One of the errors I get is:
Uncaught TypeError: Cannot read property 'win' of undefined
That's happening with the current code which follows:
Plugin:
tinymce.PluginManager.add('imageuploads', function(editor, url) {
// Add a button that opens a window
editor.addButton('imageuploads', {
text: 'Insert Image',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: "Insert Uploaded Image",
url: 'insertimage.php',
width: 700,
height: 600,
inline: true,
close_previous: "yes"
});
}
});
});
Plugin File:
$(document).ready(function(){
$('#submit-image-url').bind('click', function(){
var image_url = $('.image_choice:checked').val();
var insert_url = '<img src="/editor/uploads/' + image_url + '">';
parent.tinymce.activeEditor.selection.setContent(insert_url);
parent.tinymce.activeEditor.windowManager.close(this);
});
});
There is some HTML before that, but all it is is the images listed out with a radio input to determine which one is selected. Inserting works, but I can't seem to close the popup.
Any help would be greatly appreciated! Thanks!
The errors are coming from tinymce.js on line #22746, so the close() method is getting called. It just can't see the popup for some reason.
I fixed it with the following:
var ed = parent.tinymce.editors[0];
ed.windowManager.windows[0].close();
So, now my jQuery code looks like this:
$('.image_choice').bind('click', function(){
var image_url = $('.image_choice:checked').val();
var insert_url = '<img src="/editor/uploads/' + image_url + '">';
parent.tinymce.activeEditor.selection.setContent(insert_url);
var ed = parent.tinymce.editors[0];
ed.windowManager.windows[0].close();
});
I hope this helps someone that runs into the same problem. This one puzzled me for a few days now.
You can use this code, if your page has more than two TinyMCE editors:
tinymce.activeEditor.windowManager.close();
I used it for TinyMCE 4.
I was fighting with this for while too. I tried to implement TinyMCE 4: http://www.roxyfileman.com/ for MVC.
Changing this code helps me: win.tinyMCE.activeEditor.windowManager.close(); / win.tinyMCE.activeEditor.windowManager.windows[1].close();
In my case when I selected file, wrong popup get closed. Maybe it helps to someone ;)
try to use thi code `
<script type="text/javascript">
var parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
$(function() {
$('img').click(function(e){
e.preventDefault();
imgSrc = $(this).attr('src');
imgAlt = $(this).attr('alt');
divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
divInputSplit = divInput.split("_");
divTitle = "mce_"+(parseInt(divInputSplit[1],10) +1);
$("input#"+parentWin.inputSrc,parent.document).val(imgSrc);
$("input#"+divTitle,parent.document).val(imgAlt);
$(".mce-close",parent.document).last().trigger("click");
});
});
</script>
or visit tinymce4 file browser `
http://www.wargame-club.com/3-day-molle-assault-backpack-black.html
When I click the four product thumbnail images under the big product image, the product image will change. I find there is no click function on the a label. How does it make the product image on the thumbnail images change? Thank you.
<li>
<a title="" class="cloud-zoom-gallery" rel="popupWin:'http://www.wargame-club.com/catalog/product/gallery/id/24/image/83/', useZoom: 'cloudZoom', smallImage: 'http://www.wargame-club.com/media/catalog/product/cache/6/image/265x265/fa17b1d835a4c57a29916eae7df1805d/A/S/AS043_2.jpg'" href="http://www.wargame-club.com/media/catalog/product/cache/6/image/fa17b1d835a4c57a29916eae7df1805d/A/S/AS043_2.jpg"></a>
</li>
When you inspect the page and check the javascript files, you will get to the:
http://www.wargame-club.com/js/cjm/colorselectorplus/cloud-zoom.1.0.2.min.js
In this file you will find the following code:
$(this).bind('click', $(this), function (event) {
var data = event.data.data('relOpts');
// Destroy the previous zoom
$('#' + data.useZoom).data('zoom').destroy();
// Change the biglink to point to the new big image.
$('#' + data.useZoom).attr('href', event.data.attr('href'));
// Change the small image to point to the new small image.
$('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
// Init a new zoom with the new images.
$('#' + event.data.data('relOpts').useZoom).CloudZoom();
}
the script used is:
http://www.starplugins.com/cloudzoom