Show views field content in Colorbox modal

Public

Install and enable module Colorbox.
Create views for display titles and body: in row field title and content (node body or other).

I.e.:

</> CopyGet raw version
html5
  1. <div class="view view-example view-id-example view-display-id-page">
  2. <div class="view-content">
  3. <div class="views-row views-row-1 views-row-odd views-row-first">
  4. <div class="views-field views-field-title">
  5. <span class="field-content example-title"><a href="/example1">Example 1</a></span>
  6. </div>
  7. <div class="views-field views-field-body">
  8. <div class="field-content example-content">
  9. <h2><a href="/example1">Example 1</a></h2>
  10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque nisl quis turpis hendrerit, sed sagittis orci facilisis. Nam dapibus turpis quam, quis placerat ipsum bibendum nec.
  11. </div>
  12. </div>
  13. </div>
  14. <div class="views-row views-row-2 views-row-even">
  15.  
  16. <div class="views-field views-field-title"> <span class="field-content example-title"><a href="/example2">Example 2</a></span>
  17. </div>
  18. <div class="views-field views-field-body">
  19. <div class="field-content example-content">
  20. <h2><a href="/example2">Example 2</a></h2>
  21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque nisl quis turpis hendrerit, sed sagittis orci facilisis. Nam dapibus turpis quam, quis placerat ipsum bibendum nec.
  22. </div>
  23. </div>
  24. </div>
  25. </div>

Add CSS:

</> CopyGet raw version
css
  1. .view-example .views-row {
  2. float: left;
  3. margin-right: 20px;
  4. width: 500px;
  5. }
  6. .view-example .views-row .example-title a {
  7. color: #777;
  8. display: block;
  9. font-weight: bold;
  10. margin-top: 1em;
  11. outline: medium none;
  12. padding: 4px 13px;
  13. text-decoration: none;
  14. }
  15. .view-example .views-row .views-field-body {
  16. display: none; /* hide body */
  17. }

Add JQuery for Colorbox modal:

</> CopyGet raw version
javascript
  1. (function($) {
  2. Drupal.behaviors.exampleColorbox = {
  3. attach: function (context, settings) {
  4. if($('body.page-example')) { // your body class for work only on view's page
  5. $('.example-title a').click(function(){
  6. var thisContent = $(this).parents('.views-row').find('.example-content').html();
  7. if(thisContent) {
  8. $.colorbox({
  9. inline: true,
  10. href: $(this).parents('.views-row').find('.example-content')
  11. });
  12. }
  13. return false;
  14. });
  15. }
  16. }
  17. };
  18. })(jQuery);