Mikepo Posted January 19, 2019 Share Posted January 19, 2019 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 More sharing options...
♥JcMagpie Posted January 19, 2019 Share Posted January 19, 2019 try this, Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 20, 2019 Share Posted January 20, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 20, 2019 Share Posted January 20, 2019 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); Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 20, 2019 Share Posted January 20, 2019 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 More sharing options...
Mikepo Posted January 20, 2019 Author Share Posted January 20, 2019 @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 More sharing options...
Mikepo Posted January 20, 2019 Author Share Posted January 20, 2019 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 More sharing options...
♥JcMagpie Posted January 20, 2019 Share Posted January 20, 2019 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 More sharing options...
♥JcMagpie Posted January 20, 2019 Share Posted January 20, 2019 No just tested on my BS3 frozen site with old colorbox script and still works. Just take care in copying the script into right section. https://www.justfastfood.com/ Link to comment Share on other sites More sharing options...
Mikepo Posted January 21, 2019 Author Share Posted January 21, 2019 @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 More sharing options...
♥JcMagpie Posted January 21, 2019 Share Posted January 21, 2019 😂 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; } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 21, 2019 Share Posted January 21, 2019 This looks better me thinks, 😊 will wrap to second line if you have longer text. #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 More sharing options...
Mikepo Posted January 22, 2019 Author Share Posted January 22, 2019 @JcMagpie thanks, that did it. No more requests now. 🤔 Thank you again! Mike osC CE live - developing osC Phoenix adding modules with no core changes(awesome and easy!) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.