Jump to content
Sign in to follow this  
Mikepo

colorbox images with text

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 BS gold live - osC CE in development (awesome)

Share this post


Link to post
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


 

Share this post


Link to post
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


 

Share this post


Link to post
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


 

Share this post


Link to post
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 BS gold live - osC CE in development (awesome)

Share this post


Link to post
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 BS gold live - osC CE in development (awesome)

Share this post


Link to post
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);

 

Edited by JcMagpie

 

Share this post


Link to post
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 BS gold live - osC CE in development (awesome)

Share this post


Link to post
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


 

Share this post


Link to post
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; 
}

 


 

Share this post


Link to post
Share on other sites

@JcMagpie thanks, that did it.  No more requests now. 🤔

Thank you again!

Mike


osC BS gold live - osC CE in development (awesome)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×