Colorbox
more_horiz
close

on 29th November 2016 / by magi.yv
You can create your custom colorbox styles instead of using plugin provided styles. For creating custom colorbox style go to /sites/all/modules/contrib/colorbox/styles copy any one of the folders. (You can find plain, default and stockholmsyndrom styles there).Place the copied folder into your theme folder. Rename the folder with your custom name. Also rename the css and js files. ie, if your custom colorbox style is "My custom style" then rename folder as my_custom_style. The css and js files are "colorbox_style.css" and "colorbox_style.js" respectively. Change them to "colorbox_my_custom_style.css", "colorbox_my_custom_style.css". Open your themes .info file and append new files. stylesheets[all][] = my_custom_style/colorbox_my_custom_style.css scripts[] = my_custom_style/colorbox_my_custom_style.js Make required changes on css and js files. Now your custom colorbox style is ready, go to admin/config/media/colorbox set style to 'none' in styles and options area. Hope this helps! Please feel free to get in touch with us for further queries. Drupal Drupal 7 Colorbox Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 27th August 2013 / by webmaster
A few Drupal users have found out that Colorbox does not open the login link in a Menu when it was expected to do so. If you are looking a solution for this scenario with Colorbox in your Drupal site then read on to find out more. Here is the solution First you have to check "Enable for login links" in the Colorbox configuration page. This will add a Javascript that automatically rewrites all user/login links so they open in a Colorbox. Check if the url to the link is /user Change it to */user/login. The script checks only for user/login. Hope that helps. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more. Reference: http://drupal.org/node/1099078 Drupal Colorbox Drupal Issues Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 27th August 2013 / by webmaster
A few Drupal users had found out that their site Contact form does not load in Colorbox when calling it with the relative page url. If you are facing the same issue with Colorbox in your Drupal site the continue reading. Here is the most probable solution. The problem can occur due to a small error in the url such as having a preceeding slash as shown below<a class="colorbox-load" href="/colorbox/form/contact_site_form?width=600&height=600"> Contact </ a> So just make sure that the url does not have a preceeding slash<a class="colorbox-load" href="colorbox/form/contact_site_form?width=600&height=600"> Contact </ a> Hope that helps. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more. Reference: http://drupal.org/node/1373606 Drupal Colorbox Drupal Issues Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 31st May 2013 / by meera.l
We had faced a peculiar problem with slideshow in colorbox in one of our Drupal projects. Everything works well before an image cache is set to slideshow images to make them same in size. After setting this image cache, colorbox slideshow begin to behave so strangely by showing a very small window with scroll bar and images are hardly visible. Please refer the image below. But after refreshing page images appears with expected size. But loading another page, and returns to the previously loaded page also make the situation again. To find what exactly cause the problem we have done the following steps. First we have loaded the image explicitly in browser to make sure that the image is properly loading and it works well. Second step was to load slideshow again, but still image was not visible inside colorbox. Actually what was going on was that, if we are not setting width and height to the contents loaded inside the colorbox, colorbox will check the the size of the content to find the dimensions to use inside the colorbox. So in our case, we are loading images using ajax and when colorbox calculates the dimensions before the image is completely loaded. That is why it appears with small width and size. So we set height and width to image inside colorbox, and slideshow works like a charm. <div class="main-image-colorbox"> <img width="750px" height="550px" src="path_to_image"/> </div> Hope this will be helpful. Reference 1. http://www.jacklmoore.com/colorbox/faq Drupal Colorbox Leave a reply Your email address will not be published. Required fields are marker *
close

on 18th January 2013 / by dhanyamol.kv
Colorbox can be used to display content pop-ups. By default, the popup's height and width will be exactly the same as that of the original content. But there may be times, when you want to load the content as per the screen height. This can be done easily using jQuery. The steps you may follow to achieve this are: Assign the content which is to be displayed in the colorbox, to a variable. Find the width and height of the above content. Find the current screen's width and height. Compare height of the content with screen height.If the content's height is greater than the screen height, the content's height is set as the screen height.Same, in the case of width. Load the content with proper height and width in colorbox. The code implementation of the above steps is given below: $(".popout-link").click(function() { //.popout-link, the class in which you need the pop-up functionality. var popup_content = $('#content').html(); // Replace #content with the content's id var y = $('#content').height(); //Content's height var x = $('#content').width(); //Content's width var wy = $(window).height(); // Assigning the screen's height to wy var wx = $(window).width(); // Assigning the screen's width to wy if (y > wy) { //Compares the height y = wy; } else { y = y; } if (x > wx) { //Compares the width x = wx; } else { x = x; } $.colorbox({html:""+popup_content+"", width:x, height:y, onComplete: function() { //loads the content in colorbox with specific width and height $('#cboxLoadedContent').jScrollPane(); // call this function to show scroll bar (You need to enable Jscrollpane Module to use this though) } } Javascript Web Development JQuery Colorbox Leave a reply Your email address will not be published. Required fields are marker * Sasi Kuttan (not verified) access_time 22 May 2019 - 22:31 if (y > wy) { //Compares the height y = wy; } else { y = y; } if (x > wx) { //Compares the width x = wx; } else { x = x; } Can you please explain why is there an else statement in these lines ? Add new comment
more_horiz
close

on 11th December 2012 / by webmaster
Many Drupal users wanted to know how to use a single image to start a Colorbox slideshow? If you are pondering over the same question with Colorbox in your Drupal site then read on to find out the answer. Here is the simplest way of doing this. You just need to hide the other images with CSS (display:none) in your themes style sheet. If you can make a 1x1 pixel image style for the extra images then they can load fast Hope that helps. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more. Reference: http://drupal.org/node/1026112 Drupal Colorbox Drupal Issues Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 10th December 2012 / by chithra.k
It is easy to show an image pop-up in Colorbox using Views in a Drupal website. You just have to change the image formatter in Views. However if you don't have a View and you still want to load the image in Colorbox, you can do it using jQuery. Read on to know how to load an image in Colorbox using jQuery in a Drupal 7 website. Suppose you have an image inside the class 'product-img' and when you click on the image you need this image to be opened in Colorbox. Use the function given below to do this $(".product-img img").click(function(){ // spanId contains the id of the clicked image's parent div.This is helpful if there are more than one images. var spanId = jQuery(this).parent().attr("id"); // popup_content has the src value of clicked image. var popup_content =$('#'+spanId).html(); // loads the image in colorbox. $.colorbox({html:""+popup_content+""}); });There may be other cases when you want to show another image while clicking( lets say the same image with a different image style). To do this you can pass the required path as argument to the jQuery function. For eg: the function below receives an image's path as the url. jQuery(document).ready(function() { jQuery.testfun = function(test) { //test contains the path of the image var img = new Image(); img.src=test; img.onload = function() { var height = img.height; var width = img.width; jQuery.colorbox({html:"<img src='"+test+"' width='"+width+"' height = '"+height+"'/>"}); } } });In case of image styles the images are created only when they are called by the browser. As jQuery may try to load the image, before it is created, the Colorbox will return an empty value. To solve this, you can wait for the image to load first. Its for this reason the code above is written inside img.onload = function() {}. Drupal Drupal 7 JQuery Colorbox Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 10th December 2012 / by webmaster
Many Drupal users wanted to know how to launch a video thumbnail embedded in a View in Colorbox using Video.js. If you are facing the same question in your Drupal website with Colorbox and Views then read on to find out the solution. Follow the steps below to launch a video in Colorbox using Video.js Ensure you have the following 3 modules installed and enabled on your Drupal site. Video.js Colorbox Views First you have to create a content type to contain the data Next add a field to hold both the actual video file and the thumbnail Also add the data types that the field will use (eg mp4 for the video and jpg for the image) Set the number of uploads to 5. After that set "Manage Display" format to "Video.js" Next add an extra image field to hold the images for the View. (This is the image we use to launch Colorbox when clicked) Leave the "Manage Display" format as default (image) After saving everything you will have a content type with a video file field and video thumbnail field You should proceed to create a few Videos Now we need to create the View Add the video field and video thumbnail field to the View but exclude them both from display. Next set the formatter for the " Video file" to "Video.js : HTML 5 Video Player" Next set the formatter for the "Thumbnail file" to "Image" and image style to "thumbnail" Now we should add the Colorbox trigger. Set the trigger field to the thumbnail image and add the replacement token for the popup field which should be available in the View Save the changes and you will have the Videos coming out in the Colorbox popup with the HTML 5 Video player. Hope that helps. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more. Reference: http://drupal.org/node/1745002 Drupal Views Colorbox Drupal Issues Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 07th December 2012 / by webmaster
Many Drupal users received a "Got a packet bigger than 'max_allowed_packet' " error in their Drupal sites. If you are facing the same situation in your Drupal site then read on to find out the solution. The root cause of the error is likely to be your Drupal site's MySQL server. You will need to increase the maximum allowed packet size. To fix the error follow the steps below. The easiest way to fix this error is to install the Drupal Tweaks module. Next go to http://your-domain-name-here.com/admin/drupal_tweaks and increase the 'max_allowed_packet' memory limit. More advanced users can go to/etc/mysql in the host server running Drupal. From there open the my.cnf file using the text editor.max_allowed_packet = 16Mand change it to max_allowed_packet = 32M Next restart MySQL server usingsudo /etc/init.d/mysql stopfollowed by a sudo /etc/init.d/mysql start Hope that helps. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more. Reference: http://drupal.org/node/541396 Drupal Colorbox Drupal Issues Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 07th December 2012 / by meera.l
Colorbox is a pretty nice JQuery plugin having a lot of cool features. Recently we had worked on a Drupal project in which we had to load some content programmatically via Colorbox. To be more specific we had to load the Drupal node/add form within Colorbox before presenting it to the user. If you are facing the same scenario in your Drupal site and want to know how to load a node/add form inside a Colorbox popup then follow the steps mentioned here. Installing the Colorbox module in drupal 6 Follow the steps below to install the Colorbox module Download the Drupal Colorbox module Next extract it to your sites/all/modules directory. You should be aware that Colorbox needs a plugin for the installation to be complete. Download the Colorbox plugin and extract it into thesites/all/libraries directory in your Drupal site. If your site is running on Drupal 6 you should have the JQuery update module 6.x-2.0-alpha version. If you have taken care of all the above steps, you should be able to use Colorbox in your Drupal site Steps to display a node/add form inside a colorbox Follow the steps below First create a custom menu, with the call back function as shown below<?php //Implementing hook_menu function custom_menu() { $items['add_node_colorbox'] = array( 'title' => 'Add Node in colorbox', 'page callback' => 'custom_add_node_colorbox', 'access arguments' => array('Access Content'), 'type' => MENU_CALLBACK, ); return $items; } //Menu call back function function add_node_colorbox() { global $user; module_load_include('inc', 'node', 'node.pages'); $node = new stdClass(); $node_type = 'content_type_name'; $node->type = $node_type; $node->uid = $user->uid; $node->name = (isset($user->name) ? $user->name : ''); print drupal_get_form($form_id,$node); exit(); } Next print this menu somewhere inside your tpl file <a class='colorbox-node-add' href="/add_node_colorbox">Add Node</a&gt Now inside one of your js files, just call colorbox() function as follows. $("a.colorbox-node-add").colorbox(); Thats all there is to it. Simple isn't it? This will make a node/add for render inside Colorbox in your Drupal site. Reference:http://stackoverflow.com/questions/5344754/drupal-7-how-to-display-node…http://drupal.org/project/colorbox Drupal Drupal 6 Colorbox Leave a reply Your email address will not be published. Required fields are marker * Anonymous (not verified) access_time 22 May 2019 - 22:31 where am i supposed to put the custom menu code? and when u say "inside ur tpl file and inside ur js file" u mean which file? Add new comment