Joomla Templates Club 406,261 posts

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#177513

The wall preview doesn’t work so well. The popup window inside it is trapped and displaced (see at least 2-3 other threads with still no solution for this!) In addition, the height seems locked and turns up a huge black field at the bottom when almost all the content except the image is removed, -thus pushing the contact info and important fields below far down and making everything ugly. The wall preview is therefore broken if you ask me. Not what I expected from a commercial portfolio template. But maybe there are ways to get around it?

So to my inquiry:
I would like to keep the masonry wall gallery, but replace the preview with a popup “lightbox”-style viewer. Can I do this? If so, how?

I can’t use the JA Popup if it doesn’t have arrows or keyboard support for switching to next or previous image. So another plug-in or module(?) is needed. I know there are some out there that might fit.

How can I connect it to the wall instead of the K2 item or whatnot that make up the built-in preview?

Would greatly appreciate some help. I would hate to give up on this great looking template.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#454836

Hi oyvindss,

i am not sure the wall preview has problems as you mentioned, can you share with me url where those problems can be seen ?
Do you want only images in popup opened with arrows for switching to next or previous image ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#454846

Hi oyvindss,

We have decided to remove the second time image preview.
Of course, the image preview on detail page still work.
You can check again in our demo and update your template.
http://www.joomlart.com/demo/#joomla25-templates.joomlart.com/ja_lens/

It is a bit complicated to customize the template to support and get the K2 default Image Preview. Here the basic steps
1. Disable the Popup Review on template options
2. Replace
<p class="readmore">
<a class="item-link" href="<?php echo $this->item->link; ?>">
<?php echo JText::_('K2_LENS_READ_MORE'); ?>
</a>
</p>
with:

<p class="readmore">
<a class="modal" 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>
</p>

in every files from start folder: templatesja_lenshtmlcom_k2

But by doing this way, you will have a problem. You will not able to go to the detail page of article from this page.

I would recommend you do not do it.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. Sherlock

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#454873

First a reply to Sherlock Holmes:

Here, you see the gallery. I am about to click on an item. Things are looking good.

But when I click, the preview has a HUGE height despite me cutting down its content to the bone (and what I need really). So a black area appears underneath the preview content and it stretches the gallery and uses way more space than it needs.

Please note that I’ve set the preview to use the width of two masonry items only.

---

Attachments:

1. 
2. 

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#454884

Wall Crasher, thank you! I have followed your instructions, and it works for me. My site will be quite simple, so I don’t think I’ll need the extra functionality.

Great if I can continue to use the existing popup. But I do need “next” and “previous” arrows, plus short text descriptions per image in. I checked the site for FancyBox ( http://fancybox.net/home ) which is the one used, and it does support “next” and “previous” with arrows and mousewheel, and also text for each image. How do I enable this functionality in JA Lens?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#454960

<em>@oyvindss 322081 wrote:</em><blockquote>Wall Crasher, thank you! I have followed your instructions, and it works for me. My site will be quite simple, so I don’t think I’ll need the extra functionality.

Great if I can continue to use the existing popup. But I do need “next” and “previous” arrows, plus short text descriptions per image in. I checked the site for FancyBox ( http://fancybox.net/home ) which is the one used, and it does support “next” and “previous” with arrows and mousewheel, and also text for each image. How do I enable this functionality in JA Lens?</blockquote>

Hi oyvindss,

I don’t think it’s FancyBox, it’s just default joomla modal instead and as I know this modal does not have features of controls buttons as well as showing text for each images, you can try the following multibox lightbox that I hope would help
1) Get the attachment file unzip and then put the multiBox folder into your templatesja_lensjs folder
2) Open the file template index.php file you insert this code

<script type=”text/javascript” src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/multiBox/js/overlay.js”></script>
<script type=”text/javascript” src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/multiBox/js/Assets.js”></script>
<script type=”text/javascript” src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/multiBox/js/multibox.js”></script>
<link rel=”stylesheet” type=”text/css” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/multiBox/css/multibox.css” media=”all” />

<link rel=”stylesheet” type=”text/css” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/multiBox/css/style.css” media=”all” />

<script type=”text/javascript”>
window.addEvent(‘domready’, function(){
//var overlay = new overlay();
var box = new multiBox(‘mb’, {
overlay: new overlay(),
descClassName: ‘advancedDesc’,
});
});
</script>

Right below the tag of
<jdoc:include type=”head” />

3) Replace the modified code that suggested by Wall Crasher

<p class=”readmore”>
<a class=”modal” 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>
</p>

by this

<p class=”readmore”>
<a class=”mb” id=”<?php echo $this->item->id; ?>” 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>
<div class=”advancedDesc <?php echo $this->item->id; ?>”>
<?php echo $introtext; ?>
</div>
</p>

I hope this change would help 🙂

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#455546

Thank you for he instructions, Sherlock Holmes.

I checked out Multibox and it seems I would have to buy it, plus I don’t think it looks so good if it can’t darken the area around the image. And the site is in Chinese or Japanese. I don’t think I want to use Multibox.

It does say that it uses Fancybox in the documentation elsewhere, and also in the menus in the JA Popup plugin. Are you sure it’s not Fancybox?

Is there really no way I can get the descriptions and “foreward”/”back” buttons in the existing popup? It seems good otherwise.

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#455638

Major problem after i changed to the default popup (note: not Multibox):

The lightbox-style popup doesn’t work on the images that are loaded after the “click here to load more awesomeness” function.

It seems that the script that tells what images to include is only run initially and not again when loaded more. How can I fix this?

I guess I should be able to find the piece of code that determines which images go into the lightbox at first, copy it and insert it into the script that is activated upon clicking to load more awesomeness. So: What code, where do I find it and where should it be copied to?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#455826

<em>@oyvindss 323077 wrote:</em><blockquote>Major problem after i changed to the default popup (note: not Multibox):

The lightbox-style popup doesn’t work on the images that are loaded after the “click here to load more awesomeness” function.

It seems that the script that tells what images to include is only run initially and not again when loaded more. How can I fix this?

I guess I should be able to find the piece of code that determines which images go into the lightbox at first, copy it and insert it into the script that is activated upon clicking to load more awesomeness. So: What code, where do I find it and where should it be copied to?</blockquote>

hi oyvindss,

you can open the js file of templatesja_lensjswall.js looking for this code

//if there still more item
if($newElems.length){
// update bricks width
updateBrickWidth ($newElems);
$newElems = updateYearCount($newElems);

//move item-more to the end
$(‘#item-more’).appendTo($container).find(‘h3:first’).show();

$newElems.css(‘top’, $container.height());
$container.masonry( ‘reload’);
}

change it to

//if there still more item
if($newElems.length){
// update bricks width
updateBrickWidth ($newElems);
$newElems = updateYearCount($newElems);

//move item-more to the end
$(‘#item-more’).appendTo($container).find(‘h3:first’).show();

$newElems.css(‘top’, $container.height());
$container.masonry( ‘reload’);
$$(‘a.modal’).removeEvents(“click”);
SqueezeBox.initialize({});
SqueezeBox.assign($$(‘a.modal’), {
parse: ‘rel’
});
}

I hope that would help !

1 user says Thank You to Sherlock for this useful post

1. oyvindss

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#455942

Excellent. It works.

Thank, you Sherlock!

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#457862

Hi oyvindss,
How did you get rid of the date?
i.e. so it doesn’t show 2012, 2011, 2010 etc, and the year the article was created?
How do you do it so all items flow one after the other?
Cheers,
Matt

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#457863

matgray87, it’s described in this thread: http://www.joomlart.com/forums/topic/k2-categories-without-specifying-the-year/

I wrote:
[…] I know for sure that anyone can remove the year boxes from the gallery.

It’s described in this thread:
http://www.joomlart.com/forums/showt…Some-questions

Saguaros wrote:
“3. It’s controlled in this file: templatesja_lenshtmlcom_k2ja_lenscategory_it em.php
You can see code:
Code:
<div class=”inner item-inner clearfix”>
<h2><?php echo $timeline; ?></h2>
<p><?php echo $this->yearCounts[$this->currTimeline]; echo ‘ item’ . ($this->yearCounts[$this->currTimeline] > 1 ? ‘s’ : ”) ; ?></p>
</div>
If you want to remove, please remove <h2> and <p> tags.”

BUT: I found it much easier to just change
$addTimelineBox = true;

to
$addTimelineBox = false;

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#457865

Great, thanks for your quick response.

Where is:

$addTimelineBox = true;

to
$addTimelineBox = false;

Cheers,
Matt

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#457866

Also, this might be important for you IF you are to change the default preview to popup like I did.:

To make the popup-style link cover the entire visual item in the masonry gallery (instead of it being apøplied only to where the text covers and not further down on each item), I had to insert a CSS value for height under this area in the Template.css file: (Please note tat this was in the the older version of template. I only assume this is still necessary on the updated template.)

/* Read more */
p.readmore a {
border: none;
color: #fff
line-height: normal;
margin: 0;
padding: 5px 8px;
display: inline-block;
overflow: visible;
border-radius: 0px !important;
-wekbit-box-shadow: 0px !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
background: url(../images/trans-grad-black-20.png) repeat-x center #2a2a2a
height:170px !important;
}

Added line including value written in bold. The value (170) might be different for your needs, but it fits with the height I have on each item in the bright theme.

1 user says Thank You to oyvindss for this useful post

1. matgray87

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#457867

<em>@matgray87 325970 wrote:</em><blockquote>Great, thanks for your quick response.

Where is:

$addTimelineBox = true;

to
$addTimelineBox = false;

Cheers,
Matt</blockquote>

In the file Saguaros tipped about:
templatesja_lenshtmlcom_k2ja_lenscategory_item.php

(Can’t seem to remove space in “item” 😐 )

1 user says Thank You to oyvindss for this useful post

1. matgray87

[Author]

Posts