Display images of a specific content type in a lightbox when vocabulary is clicked

Question

Background I am using Drupal 7 and I have a taxonomy "Kitchen Type" and content type "Kitchen Picture" having default field_image for images. There are three Kitchen Types Traditional, Contemporary and Transitional. I have more than 10 Kitchen Pictures assigned to each Kitchen Type.

Problem I have a view at /kitchens (Page 1) that lists three kitchen types and when clicked, lists the Kitchen pictures (another dynamic view) (Page 2). When a picture is clicked a lightbox open up. But, I would like to have a lightbox open up with kitchen Pictures (including next-back navigation) when any of the kitchen type (traditional etc) is clicked. So, I want to skip Page 2 actually. I have no idea how to go about it. Any help would be appreciated.

Edited I am afraid I also have a link in the header "Kitchen Portfolio" that supposed to open a lightbox and allows visitor to navigate through all the kitchen pictures. I want to avoid loading all the images on all pages. I need a way out such as when link is clicked it loads the html and start lightbox navigation. I do not know how I can achieve it in Drupal.

I already have lightbox2 installed.

Thanks

Answer 1

If I were you I would create a "Kitchen Type" content type and then edit the image field to allow unlimited amount of images. Then add a taxonomy field to "Kitchen Type" assigning a taxonomy term to each.

Create a new view which pulls all "Kitchen Type" content types and add the Taxonomy Field and Image field to the display. Views allows you to style individual fields by its tpl naming convention. If you go to the "theme" option in that view you will see a set of file names to place in your theme to style individual fields. You will need to style the image field by looping through the image array and output html which conforms to the lightbox2 convention like this:

<div class="image-set">
    <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward.">
        <img class="example-image" src="img/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150">
    </a>
    <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Alternately you can press the right arrow key.">
        <img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150">
    </a>
    <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing.">
        <img class="example-image" src="img/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150">
    </a>
    <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click the X or anywhere outside the image to close">
        <img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150">
    </a>
</div>

This should display each set of images for each kitchen type right under it. Once one image is clicked it should open up a lightbox with arrows to go to next image.

Hope this helps or at least points you in the right direction!

Answer 2

Here is how I implemented it

1. Created a block view to display empty links of all "Kitchen Pictures" images

   • Added Content:Body, Content: Kitchen Type and Field:Image

   • Field Image Settings

     • Uncheck create a label, Set Formatter as "Image URL"
     • Set "Link image url" to "Nothing"
     • "Rewrite Result" => Check "Rewrite the output of this field" and paste following code.

     <a href="[field_image]" rel="lightshow[[field_kitchen_type]]" title="[body]" class="[field_kitchen_type] portfolio_kitchen_pic"></a>

   • Content:Body and Content:Kitchen Type Settings

     • Uncheck Create a label
     • Check Exclude from Display
     • Set Formatter to "Plain text"

2. Place the above created block in footer and use CSS to make it hidden (i.e. display:none)

3. To start lightbox of all images, I then used following JS function and applied to "onclick" of the "Portfolio" link.

   function start_portfolio_slidshow()
   {
      jQuery('a.portfolio_kpic').each(function(){
         title = jQuery(this).attr('title');
   
         rel = 'lightshow[portfolio]['+title+']';
         jQuery(this).attr('rel',rel);
   
         Lightbox.initList();
         Lightbox.triggerLightbox('lightshow', 'portfolio');
   
      });
      return false;
   }
   

4. To start lightbox of each kitchen-type (category). I implemented following functions

   function start_kitchen_slidshow(event)
   {
       type = event.data.type.toUpperCase();
   
       jQuery('a.portfolio_kpic.'+type).each(function(){
           title = jQuery(this).attr('title');
   
           rel = 'lightshow['+type+']['+title+']';
           jQuery(this).attr('rel',rel);
   
           Lightbox.initList();
           Lightbox.triggerLightbox('lightshow', type);
   
       });
       return false;
   }
   

Which is implemented to links like following (in jQuery(document).ready)

    $('a.lightbox_portfolio_kitchen').each(function(){
       $(this).bind('click', {type: $(this).attr('rel')}, start_kitchen_slidshow);
    });

Note: Links should have "lightbox_portfolio_kitchen" with category name in its "rel" attribute.

There may be some other solutions but this one worked for me.