3

Within Drupal, I am loading slideshow through thumbnail. The problem with Colorbox is, that it also loads the thumbnail.

I am really hoping to find the solution where clicking on thumbnail would load the slideshow but without the thumbnail.

I am using Drupal 7, and creating the colorbox slideshow through Views.

The HTML which shows the colorbox is:-

HTML

      <ul>
        <li class="first"><a href="show-thumbnail-1.jpg?width=290&amp;height=290&amp;iframe=true" rel="showcase-a376ae98-b11e-4ed6-98fe-9b17daf055cb" title="" class="colorbox init-colorbox-processed cboxElement"><img class="pad-it" src="show-thumbnail-1.jpg" width="290" height="290" alt=""></a></li>
        <li><a href="first_slideshow_image.png?width=290&amp;height=290&amp;iframe=true" rel="showcase-a376ae98-b11e-4ed6-98fe-9b17daf055cb" title="" class="colorbox init-colorbox-processed cboxElement"><img class="pad-it" src="first_slideshow_image.png" width="290" height="290" alt=""></a></li>
        <li class="last"><a href="second_slideshow_image.png?width=290&amp;height=290&amp;iframe=true" rel="showcase-a376ae98-b11e-4ed6-98fe-9b17daf055cb" title="" class="colorbox init-colorbox-processed cboxElement"><img class="pad-it" src="second_slideshow_image.png" width="290" height="290" alt=""></a></li>
      </ul>


     <ul>
        <li class="first"><a href="show-thumbnail-1.jpg?width=290&amp;height=290&amp;iframe=true" rel="showcase-a376ae98-b11e-4ed6-98fe-9b17daf055cb" title="" class="colorbox init-colorbox-processed cboxElement"><img class="pad-it" src="show-thumbnail-1.jpg" width="290" height="290" alt=""></a></li>
        <li><a href="first_slideshow_image.png?width=290&amp;height=290&amp;iframe=true" rel="showcase-a376ae98-b11e-4ed6-98fe-9b17daf055cb" title="" class="colorbox init-colorbox-processed cboxElement"><img class="pad-it" src="first_slideshow_image.png" width="290" height="290" alt=""></a></li>
        <li class="last"><a href="second_slideshow_image.png?width=290&amp;height=290&amp;iframe=true" rel="showcase-a376ae98-b11e-4ed6-98fe-9b17daf055cb" title="" class="colorbox init-colorbox-processed cboxElement"><img class="pad-it" src="second_slideshow_image.png" width="290" height="290" alt=""></a></li>
      </ul>

Now, since I just want to show thumbnails on the page, I am hiding the slideshow images through:-

CSS

ul li.first {
  display: block;
}
 ul li {
  display: none;
}

P.S. (In View), I rewrite results for the multi-image field through the following to generate the upper HTML list of images.

<a href="[field_showcase_thumb]?width=290&height=290&iframe=true" rel="showcase-[uuid]" title="" class="colorbox"><img class="pad-it" src="[field_showcase_thumb]" width="290" height="290" alt="[field_showcase_thumb-description]" /></a>

In this way, I did show only thumbnail on the page and a slideshow is loaded when I click, but how can I hide the thumbnail in the slideshow?

Thanks.

  • Do you mean there is a thumbnail that you can click on to load the slideshow and another thumbnail that appears with the slide? Two thumbnails? What are the settings in your view under Format > Settings? – othermachines Jun 24 '15 at 17:35
  • Picture is worth a thousand words, do you have a screenshot of that second thumbnail? – DeveloperWeeks Jul 13 '15 at 15:00
  • is css display:none of the thumbnail on the colorbox page not sufficient? – Joel Box Jul 24 '15 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.