hey @PeteSharp @Pealco thank you guys for your help. But i need more information, because i have many images with links to other pages. How i have to do the code to these images with different links?
Hello @RME,
In that case you can follow the approach from @PeteSharp I think he wont be upset to use his code, so you can do as this:
1st - Add a picture:
2nd - In âInteractionsâ make sure you have to None:
3rd - In "Custom Attributes add the atribute as @PeteSharp explain but with a difference, in each image you need a different link you have to give a exclusive function name, for the ones that the images uses the same you can repeat the function name. Exemple:
In my example I have three images, one go to google, and the other two go to blocs app, so you need to add a function like linktogoogle() and a function linktoblocs().
Now how to make this magic?
You click in the image and in the âCustom Attributesâ you add one with the following values:
- Name: onclick
- Value: linktogoogle()
(or the function you have related to different links)
4rd - You go to Page settings -> Code And in the Footer option you use this code as @PeteSharp show:
<script type="text/javascript">
function openPopup() {
var url = 'https://myURL.com'
popupWindow = window.open(
url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
Now what you need to change:
- Function that designate the link to that you use in the âCustom Attributeâ in the image:
function openPopup()
Change for example to:
function linktogoogle()
- URL:
var url = 'https://myURL.com'
Change to:
var url = 'https://google.com'
- Change the size of the popup:
height=300,width=400
- Change the position of the popup: (*)
left=10,top=10
- Change the interaction in resizing the popup: (*)
resizable=yes
- Change if the popup window when it scrolls it shows or not the scrollbar on the right: (*)
scrollbars=yes
etc. etc. etc.
(*) At least in my installation and using Safari, it wonât affect nothing so probably you can test if it works or notâŚ
Hope it could help youâŚ
1 Like
Question @RME are you just wanting these images to open a new browser window/tab or a pop up window type effect thatâs fixed sized? (We are making some assumptions here based on you commenting on an old thread)
And I take it your big bunch of images, just have href links already?
@Malachiman @Pealco At my page i have some webprojects. for these projects i have an image to link to the webpage. the problem is, my visitor open the new website in a new tab. many users didnât come back because my page is âunderâ the new tab. I wish the project page will open in a pop-up, so the user stay at my page in background. Sorry it is complicated to explain in english for me. :woozy_Gesicht:
Understood, the approaches above allow you to do that, although it wont always work as you want, depends on the user, if they have their browser full screen, it will only open in a new tab.
1 Like
Hey @RME
Give this a try, it works when there is a class called .popup applied to your images. Set up your image to have an interaction of href to the site you want (make sure to include a full URL).
The script should do the rest. No custom attributes required.
Make changes to height / width etc of the window to suit.
Paste into page footer
<script>
document.addEventListener('click', function (event) {
if (!event.target.matches('.popup')) return;
event.preventDefault();
var findLink = event.target.closest('a');
var url = findLink.href;
popupWindow = window.open(url,'popUpWindow','height=300, width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,status=yes')
}, false);
</script>
2 Likes
Hey that works perfect. It is possible to center the pop up and resize it dependent on the screen size?
Hey @RME, sure.
Replace the last script I posted with one of the two modified ones I made below. Option one sets the popup in relation to the window size, and option two sets the popup in relation to the screen.
The first var called percent can be set to adjust the size of the popup window as a percentage. Eg. 0.8 is 80%.
Option One
Popup is sized by browser window<script>
document.addEventListener('click', function (event) {
if (!event.target.matches('.popup')) return;
event.preventDefault();
var percent = '0.8'; // Set Popup Size by Percentage of Window
var findLink = event.target.closest('a');
var url = findLink.href;
var top = window.screen.height - (parseInt(window.innerHeight) * percent);
top = top > 0 ? top/2 : 0;
var left = window.screen.width - (parseInt(window.innerWidth) * percent);
left = left > 0 ? left/2 : 0;
popupWindow = window.open(url,'popUpWindow','height='+ (parseInt(window.innerHeight) * percent) +', width='+ (parseInt(window.innerWidth) * percent) +',left='+left+',top='+top+',resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,status=yes')
}, false);
</script>Option Two
Popup is sized on screen<script>
document.addEventListener('click', function (event) {
if (!event.target.matches('.popup')) return;
event.preventDefault();
var percent = '0.8'; // Set Popup Size by Percentage of Screen
var findLink = event.target.closest('a');
var url = findLink.href;
var top = window.screen.height - (parseInt(window.screen.height) * percent);
top = top > 0 ? top/2 : 0;
var left = window.screen.width - (parseInt(window.screen.width) * percent);
left = left > 0 ? left/2 : 0;
popupWindow = window.open(url,'popUpWindow','height='+ (parseInt(window.screen.height) * percent) +', width='+ (parseInt(window.screen.width) * percent) +',left='+left+',top='+top+',resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,status=yes')
}, false);
</script>
1 Like
Actually, if there is enough interest. I would be keen to turn this into a custom bric, with options.
2 Likes
It works perfectly on my website: www.homepage-eins.de
Thanks for your help. Maybe I can design websites, but I have some challenges with additional codes. 
1 Like
Adguard stopped your Pop Up. LOL