- Posts: 10
COMMUNITY FORUM
K2 Images - Opening in window instead of lightbox?
- James Wiseman
-
Topic Author
- Offline
- New Member
Less
More
11 years 1 month ago #127486
by James Wiseman
K2 Images - Opening in window instead of lightbox? was created by James Wiseman
Hi all,
I have a client who (for reasons best known to themselves!) wants to have their K2 images opening in a new window sized to the image, rather than in a lightbox.
Is there any way I can set this up by default, and where would I look?
I'm struggling to find where I'd find the code for this, or if there's any functionality built in to enable me to set this by default.
Any help with this would be much appreciated, as it's the only thing still to 'fix' on a site that's due to go live ASAP.
Thanks! :)
James
I have a client who (for reasons best known to themselves!) wants to have their K2 images opening in a new window sized to the image, rather than in a lightbox.
Is there any way I can set this up by default, and where would I look?
I'm struggling to find where I'd find the code for this, or if there's any functionality built in to enable me to set this by default.
Any help with this would be much appreciated, as it's the only thing still to 'fix' on a site that's due to go live ASAP.
Thanks! :)
James
Please Log in or Create an account to join the conversation.
- Lefteris
-
- Offline
- Platinum Member
Less
More
- Posts: 8743
11 years 1 month ago #127487
by Lefteris
Replied by Lefteris on topic Re: K2 Images - Opening in window instead of lightbox?
Hi. You first need to remove the class "modal" from the images links in K2 item page. Then you can just add custom javascript code on the onclick attribute of the links to open the image. In any case in order to make changes to item.php you need first to read getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates .
Please Log in or Create an account to join the conversation.
- James Wiseman
-
- Offline
- New Member
Less
More
- Posts: 10
11 years 1 month ago #127488
by James Wiseman
Replied by James Wiseman on topic Re: K2 Images - Opening in window instead of lightbox?
Thank you - I will give it a go! :)
Please Log in or Create an account to join the conversation.
- Lefteris
-
- Offline
- Platinum Member
Less
More
- Posts: 8743
11 years 1 month ago #127489
by Lefteris
Replied by Lefteris on topic Re: K2 Images - Opening in window instead of lightbox?
You are welcome.
Please Log in or Create an account to join the conversation.
- James Wiseman
-
- Offline
- New Member
Less
More
- Posts: 10
11 years 1 month ago #127490
by James Wiseman
Replied by James Wiseman on topic Re: K2 Images - Opening in window instead of lightbox?
Sorry - Me again! I spoke too soon :(
OK, I've managed to create the duplicate K2 folder, and removed the 'modal' class from image links, but I can't seem to get the javascript code to work properly.
I'm adding the code to the image link (under <span class="itemImage">) but I can't seem to get it to work.
I've added the Javascript link at the beginning of the item.php file, like this:
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/newimg.js');
?>
The 'newimg.js' file is a script to resize the window to the image size.*
Then, under the main image code (around line 210-ish), I've put this:
<span class="itemImage">
<a onclick="newImg(this.href);return false" rel="{handler: 'image'}" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</a>
</span>
...but it still opens up in a new window without any resizing.
*For info, the content of the javascript file is:
function newImg(which){
var theImg = new Image();
theImg.src = which;
var imgw = theImg.width;
var imgh = theImg.height;
if(imgw<100){imgw = 100};
if(imgh<100){imgh = 100};
var ImgWin = window.open('','imgwin',config='height='+imgh+',width='+imgw+',top=0,left=100')
with(ImgWin.document){
writeln('<html><head><title>Display Image</title></head>');
writeln('<body onload="self.focus()" onblur="self.close()">');
writeln('<div style="text-align:center">');
writeln('<img src='+which+'></div>');
writeln('<div style="text-align:center;font-size:9px">');
writeln('<a href="#" onClick="self.close()">Close Me</a>');
writeln('</div></body></html>');
close();
}
}
Any ideas what I'm doing wrong? I'm a bit rusty on Javascript. Am I editing the correct <div> in item.php?
Thanks,
James
OK, I've managed to create the duplicate K2 folder, and removed the 'modal' class from image links, but I can't seem to get the javascript code to work properly.
I'm adding the code to the image link (under <span class="itemImage">) but I can't seem to get it to work.
I've added the Javascript link at the beginning of the item.php file, like this:
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/newimg.js');
?>
The 'newimg.js' file is a script to resize the window to the image size.*
Then, under the main image code (around line 210-ish), I've put this:
<span class="itemImage">
<a onclick="newImg(this.href);return false" rel="{handler: 'image'}" href="<?php echo $this->item->imageXLarge; ?>" title="<?php echo JText::_('K2_CLICK_TO_PREVIEW_IMAGE'); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</a>
</span>
...but it still opens up in a new window without any resizing.
*For info, the content of the javascript file is:
function newImg(which){
var theImg = new Image();
theImg.src = which;
var imgw = theImg.width;
var imgh = theImg.height;
if(imgw<100){imgw = 100};
if(imgh<100){imgh = 100};
var ImgWin = window.open('','imgwin',config='height='+imgh+',width='+imgw+',top=0,left=100')
with(ImgWin.document){
writeln('<html><head><title>Display Image</title></head>');
writeln('<body onload="self.focus()" onblur="self.close()">');
writeln('<div style="text-align:center">');
writeln('<img src='+which+'></div>');
writeln('<div style="text-align:center;font-size:9px">');
writeln('<a href="#" onClick="self.close()">Close Me</a>');
writeln('</div></body></html>');
close();
}
}
Any ideas what I'm doing wrong? I'm a bit rusty on Javascript. Am I editing the correct <div> in item.php?
Thanks,
James
Please Log in or Create an account to join the conversation.
- Lefteris
-
- Offline
- Platinum Member
Less
More
- Posts: 8743
11 years 4 weeks ago #127491
by Lefteris
Replied by Lefteris on topic Re: K2 Images - Opening in window instead of lightbox?
To verify that you are editing the correct file you can always view the page source using your browser. You should also check the browser console for any javascript errors. Finally regarding the actual javascript popup code, if it doesn't work, you can use Google to find an alternative. There are several out there.
Please Log in or Create an account to join the conversation.