Kryptronic Software Support Forum

Design_Wholesale · 10-18-2010 06:31:28

What should I be calling on and be aware of if trying to use the lightbox for text display?

The reason why I am asking is because I would like to use the lightbox display on our display => splash page in order to display some popup information when customers click on certain links or, failing that, an image with text (not something I like doing, but okay as a workaround if the other is no go).

This is potentially a far better solution than using popups, a: because it looks good and b: because such displays don't get blocked in the way that popups do.

Dave · 10-18-2010 06:47:41

Lightbox is for images. There are several other things out there that are similar which may be used for text display (thickbox is one that comes to mind though I see that it is no longer being developed but its site has links to replacements that provide similar function).

Design_Wholesale · 10-18-2010 15:31:58

Thanks, Dave, - I found the Thickbox information here:

http://jquery.com/demo/thickbox/

...and Lightbox Gone Wild here:

http://particletree.com/features/lightbox-gone-wild/

...and some information about using and configuring Thickbox here:

http://www.webreference.com/programming … /Thickbox/

I implemented in a matter of minutes (very simple to implement, and works too) and notice that, whilst development may have stopped on Thickbox, it is still more up-to-date than .

Another few options for anyone wanting to do this kind of thing:

http://jqueryui.com/demos/dialog/

http://swip.codylindley.com/DOMWindowDemo.html

http://www.shadowbox-js.com/index.html (does not look as though it can be used for text display, but could be nice for galleries)

http://www.p51labs.com/lightwindow/ (I do not know what the situation is with this - there is plenty of documentation but getting this working is a non-starter - even the tests won't work, yet in the code itself there seems to be very little difference between this and the images-only original lightbox, as used in the default CCP software).

http://fancybox.net/ (seems to be images only)

...and Thickbox works fine. - A bit fiddly to implement, but works okay. - The code samples that show exactly what code is required for what makes things considerably easier.

Last edited by Design_Wholesale (10-20-2010 14:22:13)

Design_Wholesale · 10-20-2010 14:40:43

I eventually found that, with something like the following code in the head section, it possible to get two different lightboxes working in CCP conflicting with one another:

Code:

<?php

$ns = $this->globals('khxc.namespace');

if ($ns == 'prodshow') {

$skinfunc->lightbox();

} else {

print '<link rel="stylesheet" href="skins/LDW/css/lightbox.css" type="text/css" />';
print '<script src="skins/LDW/scripts/lightbox.js" type="text/javascript"></script>';
print '<script src="skins/LDW/scripts/prototype.js" type="text/javascript"></script>';

}

?>

...The problem is that, ideally, I would like to replace the use of in the software with something like so I can freely use lightboxes for text images anywhere in the webstore ...and this is where I am having problems.

The lightbox functionality is controlled through and, in our case, the following block of code (from the product detail template file in use in our webstore) calls and implements the lightbox:

Code:

// +--
// | Handle extra large image.
// +--

$showxl  = 0;

$imglistxlg = $proddisp['imgxl'];

if (empty($imglistxlg)) {$imglistxlg = 'none.png';}

if (($imglistxlg) && ($imglistxlg != 'none.png') && ($ns == 'prodshow')) {

     $this->globals('khxc.load_lightbox',1);

     $showxl   = 1;
     $xlcount  = 0;
     $xlimgtag = '';
     $zlcount  = count($imglistxlg);

     $imglistxlg  = $this->make_list($imglistxlg);

     if (count($imglistxlg) == 1) {$text = 'View Larger Image';}
     else                      {$text = 'View Larger Image Slideshow';}

     foreach ($imglistxlg as $num => $img) {

          $xlcount++;

          $xlurl  = $this->globals('khxc.url_nonssl');
          $xlurl .= '/media/' . $app . '/prodxl/' . $img;

          if ($xlcount == 1) {

               $xlimgtag .= '<p><a href="' . $xlurl . '" rel="lightbox[prodgroup]" title="';
               $xlimgtag .= $prodname . '" class="khxc_hrefbutton">' . $text . '</a></p>';

          } else {

          $xlimgtag .= '<p class="hidden"><a href="' . $xlurl . '" rel="lightbox[prodgroup]" title="';
          $xlimgtag .= $prodname . '" class="khxc_hrefbutton">' . $text . '</a></p>';

          } // End of if statement.

} // End of foreach statement.

} // End of if statement.

Somehow I need to rewrite the section that deals with and that is where things are not working. - With thickbox the code for button display would be as follows for inline content (which is what seems to most closely match the intended result), but the results of trying to rewrite the existing code, to date, have not been too pleasant to put it lightly.

Code:

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />

Another option that comes to mind, and which I would actually prefer, is if the image were to simply be clickable. - That is something I am looking at the possibility of at the moment.

Last edited by Design_Wholesale (10-20-2010 14:42:42)

Design_Wholesale · 10-21-2010 11:53:11

Just an update on this. - The lightbox display in CCP does not seem to be replaceable. - Like it or not the only one that will work for the images within the CCP software is Lightbox 2.0, so, if you want anything more comprehensive for lightbox popups in your webstore, get used to hacking the headers and hope that you do not need any non-image lightboxes in the area.

I think that this is because of the jQuery library, which CCP seems to really dislike for some reason. - The Prototype library works okay for most things, but definitely not anything requiring jQuery (which also conflicts with absolutely Javascript that does not use the jQuery library). Not sure what can be done about this at present, but Shadowbox seems to up to date and still being worked on (only it does require a license for commercial use and I am not sure whether it can handle anything outside of images ...I also have a suspicion that it, too, uses jQuery).

Last edited by Design_Wholesale (10-21-2010 15:09:57)

Design_Wholesale · 10-22-2010 10:51:01

Found another, active, ModalBox solution:

http://okonet.ru/projects/modalbox/

- very comprehensive and good documentation. - Need to take a look at this, too, sometime.

Also, for , amending where it has the

Code:

#lightbox{
     display:none;
     position: absolute;
     top:50%;
     left:40%;
     z-index:9999;
     width:750px;
     height:400px;
        overflow:auto;
     margin:-220px 0 0 -250px;
     border:1px solid #fff;
     background:#FDFCE9;
     text-align:left;
}

...block with the addition will add scrollbars to the lightboxes (if required - small content that fits completely inside the box should not generate scrollbars).

...and:

Code:

#lightbox{
     display:none;
     position: absolute;
     top:50%;
     left:40%;
     z-index:9999;
     width:750px;
     height:auto;
     margin:-220px 0 0 -250px;
     border:1px solid #fff;
     background:#FDFCE9;
     text-align:left;
}

...will enable the lightbox height to adjust automatically to accomodate the contents.

Last edited by Design_Wholesale (10-22-2010 10:54:00)

Casimiro · 01-29-2011 19:06:11

Would it be possible to use ClickCartPro's lightbox on any image on my site? If so can someone provide an example?

Thanks.

Design_Wholesale · 01-30-2011 13:43:25

You should just be able to take the code from the default product display template and be able to use that.

So, first:

then:

Code:

// +--
// | Get variables we need to draw this display.
// +--

$app      = $this->globals('khxc.app');
$ns       = $this->globals('khxc.namespace');
$eol      = $this->globals('khxc.eol');
$proddisp = $this->globals('ecom.prod_proddetail');
$xid      = $proddisp['id'];
$id       = $this->xhtml_encode($xid);
$usethumb = $this->globals('khxc_settings.' . $app . '.imguseprodthumb');
$imgwidthth = $this->globals('khxc_settings.' . $app . '.imgsizeprodlgth');

$form         = $this->xhtml_encode($this->globals('khxc_form.form'));
$formid       = $this->xhtml_encode($this->globals('khxc_form.formid'));
$url          = $this->xhtml_encode($this->globals('khxc_form.url'));
$upload       = $this->globals('khxc_form.upload');
$required     = $this->globals('khxc_form.required');
$desc_has_tags = $this->has_tags($this->globals('khxc_form.description'));
$buttname     = $this->globals('khxc_form.submit_modify');
$disablewl    = $this->globals('khxc_settings.' . $app . '.disablewishlist');

Code:

// +--
// | Handle extra large image.
// +--

$showxl  = 0;

$imglistxlg = $proddisp['imgxl'];

if (empty($imglistxlg)) {$imglistxlg = 'none.png';}

if (($imglistxlg) && ($imglistxlg != 'none.png') && ($ns == 'prodshow')) {

     $this->globals('khxc.load_lightbox',1);

     $showxl   = 1;
     $xlcount  = 0;
     $xlimgtag = '';
     $zlcount  = count($imglistxlg);

     $imglistxlg  = $this->make_list($imglistxlg);

     if (count($imglistxlg) == 1) {$text = 'View Larger Image';}
     else                      {$text = 'View Larger Image Slideshow';}

     foreach ($imglistxlg as $num => $img) {

          $xlcount++;

          $xlurl  = $this->globals('khxc.url_nonssl');
          $xlurl .= '/media/' . $app . '/prodxl/' . $img;

          if ($xlcount == 1) {

               $xlimgtag .= '<p><a href="' . $xlurl . '" rel="lightbox[prodgroup]" title="';
               $xlimgtag .= $prodname . '" class="khxc_hrefbutton">' . $text . '</a></p>';

          } else {

               $xlimgtag .= '<p class="hidden"><a href="' . $xlurl . '" rel="lightbox[prodgroup]" title="';
               $xlimgtag .= $prodname . '" class="khxc_hrefbutton">' . $text . '</a></p>';

          } // End of if statement.

     } // End of foreach statement.

} // End of if statement.
if (($multilg) && ($usethumb)) {
    $imgtag   .= '<p>';
     foreach ($imglistlg as $num => $name) {
        $imgurl   = 'media/' . $app . '/prodlg/' . $name;
        $imgtag   .= '<img src=\'' . $imgurl . '\' onmouseover="var x=document.getElementById(\'prodImage\'); x.src=document.prodImages[' . $num . '].src;" width="' . $imgwidthth . '" alt="' . $prodname . '" />';
    } // End of foreach statement.
    $imgtag   .= '</p>';

} // End of if statement.

The lightbox is prepared for use by default in the header code of the file, so a little modification of the code above should allow you to display other images in a lightbox.

Last edited by Design_Wholesale (01-30-2011 13:54:37)

Kryptronic Software Support Forum

#1 10-18-2010 06:31:28

Lightbox for Text 'Popup' Display -?

#2 10-18-2010 06:47:41

Re: Lightbox for Text 'Popup' Display -?

#3 10-18-2010 15:31:58

Re: Lightbox for Text 'Popup' Display -?

#4 10-20-2010 14:40:43

Re: Lightbox for Text 'Popup' Display -?

Code:

Code:

Code:

#5 10-21-2010 11:53:11

Re: Lightbox for Text 'Popup' Display -?

#6 10-22-2010 10:51:01

Re: Lightbox for Text 'Popup' Display -?

Code:

Code:

#7 01-29-2011 19:06:11

Re: Lightbox for Text 'Popup' Display -?

#8 01-30-2011 13:43:25

Re: Lightbox for Text 'Popup' Display -?

Code:

Code:

Board footer