Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

colorbox images with text


Mikepo

Recommended Posts

Hi all,

Is it possible to add a descriptive title of the image when using the colorbox headertag script. just a single line of text will do, directly under the image in the popup window?

Mike

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

I belive this is already built into colorbox. It uses the title or alt tag. You will need to check the colorbox script you are running as it's default status is false. Also you will need to find the temp-image in the relavent code and make sure something is defined for title or alt in the image code.

 

image.png.1869f777536629fc5cc64de7cd717afb.png

 

Link to comment
Share on other sites

Do it properly use this addon. https://apps.oscommerce.com/KgXJi&modular-image-descriptions-bs&c=images

Quick and dirty hack!

in

includes/modules/header_tags/ht_product_colorbox.php

find

$oscTemplate->addBlock('<script>var ImgCount = $(".piGal").data("imgcount"); $(function() {$(\'.piGal\').css({\'visibility\': \'hidden\'});$(\'.piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'100%\',title:true,highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'.piGal\').css({\'visibility\': \'visible\'});$(\'.piGal a\').colorbox({maxHeight: \'90%\',maxWidth: \'90%\', rel: \'pigallery\'});$(\'.piGal img\').each(function() {var imgid = $(this).attr(\'id\') ? $(this).attr(\'id\').substring(9) : 0;if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});});</script>', $this->group);
      

and replace with, will give product name under image.

$oscTemplate->addBlock(
          '<script>var ImgCount = $(".piGal").data("imgcount");
          $(function() {
            $(\'.piGal\').css({\'visibility\': \'hidden\'});
            $(\'.piGal\').photosetGrid({
            gutter: \'5px\',
            layout: ""+ ImgCount +"",
            width: \'100%\',
            highresLinks: true,
            rel: \'pigallery\',
            onComplete: function() {
                $(\'.piGal\').css({\'visibility\': \'visible\'});
                $(\'.piGal a\').colorbox({maxHeight: \'90%\',
            maxWidth: \'90%\',
            rel: \'pigallery\'});
            $(\'.piGal img\').each(function() {
            var imgid = $(this).attr(\'id\') ? $(this).attr(\'id\').substring(9) : 0;
            //image title start
            $(this).parent().attr("title", "' .addslashes($product_info['products_name']).'<br>" + $(this).attr("alt"));
            //images title end
            if ( $(\'#piGalDiv_\' + imgid).length ) {
            $(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });} });}});});</script>', $this->group);

image.png.c399597a8afb5566d660d4b8cf2e4a7a.png

 

Link to comment
Share on other sites

Oh and you may whant to look at updating the colorbox script and css as the one with frozen is very old. I have updated mine to Version 1.6.4 - 2016/05/10

and it works fine. I also changed the header tag to use un minified file jquery.colorbox.js as then you can see what the settings are and update then as required. As you can see I have slideshow enabled.

https://github.com/jackmoore/colorbox

 

Link to comment
Share on other sites

@JcMagpie

Thanks for all your advice.  I started using the suggested hack but couldn't find the code in 

includes/modules/header_tags/ht_product_colorbox.php

to replace.  Nothing in the file looked familar.

I'm using CE Frozeon, and I even searched all files for the code of interest, but again nothing found.

I looked at updating colorbox, but wasn't sure where to start, so I couldn't go down that avenue either.

Hope you can advise?

Mike

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

sorry, found the code.  Whenever I copy from these forum pages hidden characters are also copied.....

Pasted the new code in and I get a parse error

Parse error: syntax error, unexpected ''<script>var ImgCount = $(".pi' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ')' in D:\********includes\modules\header_tags\ht_product_colorbox.php on line 68

Can't see the syntax error. I';ll keep looking but if you find it first do let me know

Mike

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

I've tested it on BS4 with the new colorbox script and get no errors. The strange code is probably my fault for not inserting it in as code sorry.

you can see it working on https://chilleddisplays.co.uk/

post your script and I will see if it works on my site.

$oscTemplate->addBlock(
          '<script>var ImgCount = $(".piGal").data("imgcount"); 
          $(function() {
            $(\'.piGal\').css({\'visibility\': \'hidden\'});
            $(\'.piGal\').photosetGrid({
            gutter: \'5px\',
            layout: ""+ ImgCount +"",
            width: \'100%\',
            highresLinks: true,
            rel: \'pigallery\',
            onComplete: function() {
                $(\'.piGal\').css({\'visibility\': \'visible\'});
                $(\'.piGal a\').colorbox({maxHeight: \'90%\',
            maxWidth: \'90%\', 
            rel: \'pigallery\'});
            $(\'.piGal img\').each(function() {
            var imgid = $(this).attr(\'id\') ? $(this).attr(\'id\').substring(9) : 0;
            //image title start
            $(this).parent().attr("title", "' .addslashes($product_info['products_name']).'<br>" + $(this).attr("alt"));
            //images title end
            if ( $(\'#piGalDiv_\' + imgid).length ) {
            $(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });} });}});});</script>', $this->group);

 

 

Link to comment
Share on other sites

@JcMagpie

Many thanks for your help.  The script works, just had to add a query to get the $product_info['products_name'].

One problem exists, if the $product_info['products_name'] is too long, it overlaps the text "image 1 of 5".  Is there any way to put the $product_info['products_name'] on a new line below the "image 1 of 5"?

thanks

Mike

osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!)

Link to comment
Share on other sites

😂 you don't want much do you. Now your getting into the js that makes the colorbox! I don't want to mess with the main code so why not do it with css. We can move the text out into main image and make a text box. Play with this untill you get something your happy with.

This is just a quick one to show you what you can try.

#cboxTitle { 
    text-align:justify !important;
    width:98.5% !important; 
    margin-bottom:24px !important;
    padding:5px !important;
    background-color:#333 !important;
    opacity:0.75 !important;
    filter:alpha(opacity=75) !important;
    color:#fff !important;
    padding-bottom:50px;
    height:50px;
}

image.png.e114852d80cf5e059f70915b0daffae5.png

 

Link to comment
Share on other sites

This looks better me thinks, 😊 will wrap to second line if you have longer text.

image.png.bba9360f07898a35ac46e9188ac3cd20.png

#cboxTitle {
position: absolute;
bottom: 25px !important;
left: 0px;
text-align:center !important; 
width: 100% !important; 
font-weight: bold;
color: #7C7C7C;
word-break: break-word !important;
margin-right: 0px; 
margin-left: 0px; 
}

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...