Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Virtuemart Lightbox

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi there, just joined so here goes my first question.

I intend to use one of your templates, probably elevation, in combination with virtuemart. Also i intend to use a couple of your wicked modules, like prettyphoto, micro blog and bamboobox for presentation of my content.

Obviously i would like the styling of the various lightbox effects to be similar throughout the entire site. This won't be problem with the "normal" content with all the css files and options the extensions are filled with, but it is to me in virtuemart.

The lightbox effect in virtuemart is the standard one for virtuemart, and this does look a bit off in comparison to the rest. So, my question is, how can i implement the prettybox styling in the flypage of virtuemart.

Thanks in advance, and btw very refreshing templates!
  • Serge's Avatar
  • Serge
  • 12 Month basic
  • 39 posts
  • Karma: 1
The administrator has disabled public write access.
Hello Serge,

Elevate does not support VirtueMart fully, but that doesn't mean you can't use it. However, as far as the lightbox question, I honestly don't know enough about the VirtueMart lightbox feature to tell you how to fix it. However, there might be some extensions for VirtueMart that provide a similar lightbox.

If you want to do it the manual way though, it might be a lot of coding/hacking to get the two different lightboxes to work the same way.

Regards,
Jeremy
  • Jeremy's Avatar
  • Jeremy
  • 12 Month Developer
  • 407 posts
  • Karma: 15
The administrator has disabled public write access.
1OK, I wanted to do exactly this too! So, after an afternoon randomly basing away at the problem I have it working (with the final push from Jeremy! Thanks J). Now I share the secret...

Warning! This is a hack involving core VM files, so applying it will ceratinly void your warranty. As I am far from adept with the code there are almost certainly better ways of doing it. If anyone finds one please let the rest of us know!

My 3 step solution is as follows:
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Step 1 - Stop VM from loading the fugly Slimbox (the core file hack):

open: /administrator/components/com_virtuemart/classes/htmlTool.class.php htmlTool.class.php

find the following code and remove the sections in red:

function loadSlimBox( ) {
global $mosConfig_live_site, $vm_mainframe;
if( !defined( '_SLIMBOX_LOADED' )) {

vmCommonHTML::loadMooTools();

$vm_mainframe->addScriptDeclaration( 'var slimboxurl = ''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox/';');
$vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/js/slimbox.js' );
$vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/css/slimbox.css' );

define ( '_SLIMBOX_LOADED', '1' );
}
}
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Step 2: get VM to call prettyPhoto instead of Slimbox at the appropriate time.

again in htmlTool.class.php htmlTool.class.php find:

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );

and replace with

$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="prettyBox"' );
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Step 3: Get the template to load the prettyphoto script in the relevant (virtuemart) pages:

Open your templates index.php and insert the following code (please note that it contains the prettyphoto parameter settings, you may want your different to mine!) before the </head> tag, remebering to define your-domain.com:

<?php if (@$option=='com_virtuemart' ) { ?>
<link rel="stylesheet" href="your-domain.com/modules/mod_prettyBox/prettyPhoto/css/prettyPhoto.css" type="text/css" />
<script type="text/javascript" src="your-domain.com/modules/mod_prettyBox/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('a[rel^='prettyOverlay'],a[rel^='prettyPhoto']').prettyPhoto({
animationSpeed: 'fast',
padding: 20 ,
showTitle: false,
opacity: 0.6 ,
allowresize: true,
counter_separator_label: '/',
theme: 'dark_rounded'
});
});
</script>
<?php } ?>
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
I am sure it goes without saying, but BACKUP everything before you make any changes and don't come crying to me if this breaks your VM shop. It works for me though!
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Haaaaaaaa:), this looks pretty cool! I was as far as replacing the VM lightbox by yoo lightbox (there is some thread about that somewhere:)), and just couldn't figure out how to get prettybox instead. I'm going to give it a shot right now, hope to report back in just a little bit...B)

EDIT:
Ok, i tried, but the image opens in a browser window instead of a prettybox. I do get "missing ) after argument list" on the last two lines that need to be added to index.php.

Maybe my vm theme.php has got something to do with (although i changed the rel there also), maybe the template (although i tried several), or well could be a lot of things. This weekend i will give it another shot on a standard vm installation and see what happens then. Anyways, thanks so far, cause i have the feeling this is getting pretty close.
  • Serge's Avatar
  • Serge
  • 12 Month basic
  • 39 posts
  • Karma: 1
The administrator has disabled public write access.
Ok, i tried, but the image opens in a browser window instead of a prettybox. I do get "missing ) after argument list" on the last two lines that need to be added to index.php.

Maybe my vm theme.php has got something to do with (although i changed the rel there also), maybe the template (although i tried several), or well could be a lot of things. This weekend i will give it another shot on a standard vm installation and see what happens then. Anyways, thanks so far, cause i have the feeling this is getting pretty close.
  • Serge's Avatar
  • Serge
  • 12 Month basic
  • 39 posts
  • Karma: 1
The administrator has disabled public write access.
It sounds like something wasn't typed right, and there was a typo. I can't say without a link, but be very careful where you are changing things. Perhaps older changes might also throw it off if you didn't change them back to the originals.

Jeremy
  • Jeremy's Avatar
  • Jeremy
  • 12 Month Developer
  • 407 posts
  • Karma: 15
The administrator has disabled public write access.
Check the page source from the flypage to see if the prettyphoto script is being loaded or not, I suspect not.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
throw us a link and I will have a look in the morning. I am signing off now....
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Sorry Beachwalker, i am trying this local at the moment.

I have made an install with joomla 1.15 and VM 1.14, without any modifications. I am using the standard vm theme and JB Sketch. I have installed the latest plg_jbLibrary and the latest version of mod_prettyBox. The plugin is enabled atm, the module i have tried on and off (just trying:)).

I am pretty sure the changes i have made in htmltools are correct, not so about the index.php. I have attached a text file with the index.php and the code from the flypage. Could you be so kind as to have a look whether everything is as it should be?

I know close to nothing about scripting, but i do see that on the flypage the prettybox is mentioned in two instances. Also in the code that i copy/pasted from your earlier post i couldn't miss the smiley, maybe it is that simple.

Ah yes i still get the following error in firebug; missing ) after argument list
http ://localhost/sales/index.php?option=com_virtuemart&Itemid=55&vmcchk=1&Itemid=53
Line 119, and the picture opens in a new browser window.

Should the error that i make not be obvious with the file attached then i will let it rest until i have everything online:). Anyways, TIA!

File Attachment:

File Name: Prettybox_and_VM.txt
File Size: 11856
Attachments:
  • Serge's Avatar
  • Serge
  • 12 Month basic
  • 39 posts
  • Karma: 1
The administrator has disabled public write access.
Do you have prettyBox enabled? If you do, that might be your issue. Disable the module, but leave the code in the index.php file.

Its really hard to know for sure without seeing the site, so bear with us.

Regards,
Jeremy
  • Jeremy's Avatar
  • Jeremy
  • 12 Month Developer
  • 407 posts
  • Karma: 15
The administrator has disabled public write access.
There is an issue with your code methinks. I think the BB code has thrown a spanner in the works and you are missing a )

the line that should read:
jQuery('a[rel^='prettyOverlay'],a[rel^='prettyPhoto']').prettyPhoto({

in your code is:
jQuery('a[rel^='prettyOverlay'],a[rel^='prettyPhoto']'.prettyPhoto({
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Also, as Jeremy points out, it looks like you have the module enabled. That is why the prettybox script is loading twice in the flypage (you didn't make any alterations to the flypage right?)

There is no need to have the module enabled. The code in the index.php tells Joomla to load the prettybox script into any page that is part of Virtuemart.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
So, after a bit of time i took another hit at getting a pretty photo effect in my vm. I got it to work by changing the rel in both htmltools.class.php as in my theme.php (vm). But it only works when i have the prettyphoto module enabled on all pages. If i just enable it on for instance home, the prettyphoto lightbox doesn't work on my vm pages. Enabled on all pages, no problem, a sweet and smooth prettyphoto on my vm flypage.

The suggestion made earlier that the problem lies in the not loading of the prettyphoto by vm is therefore the reason that i couldn't get it to work. Now i will look how to get it to load without needing to publish the module to all vm pages. Maybe i didn't read the responses good enough (let's hope so:)) or maybe someone has another suggestion how to load the prettyphoto in vm flypages.

Anyways, thank you very much so far, i am really happy to have it functioning some way, and of course best wishes and stuff:P
  • Serge's Avatar
  • Serge
  • 12 Month basic
  • 39 posts
  • Karma: 1
The administrator has disabled public write access.
Hi Serge,

Read my third code-filled post again. The modification to the templates index.php causes prettyphoto to load each time a page is generated by Virtuemart. This means that the prettybox module can be disabled completely.

Cheers.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers