The "Load images from custom links in a Colorbox" needs more examples such as grouping together quick links on the fly for a slideshow.

Use the 'rel' attribute (<a rel="xyz" ..>) on a colorbox link to create an image group or gallery. Putting the same value on the rel attribute on multiple colorbox links puts arrows on the bottom of the colorbox to switch between them directly.

I got some troubles in loading content, from a custom image link in colorbox windows
The solution as you can see this article (with examples) http://www.alessioligabue.it/colorbox-image-load is place the colorbox class in the div

<div>
<p><a class="colorbox" href="/imageaddress/fullquality.jpg" title="div title">
        <img alt="alt image" src="/imageaddress/minified.jpg"
         title="image title" /></a></p>
</div>

<a class="colorbox-node" href="<?php echo $base_url?>/node/add/boarding?width=800&height=500&iframe=true" role="button">Add A Task</a>

Popup is displaying properly.
But the issue is after pressing SAVE button with out any providing details ( purpose is checking validation ),
System will display huge unformatted json data.
This happens only when adding Content Type data, it goes okay when adding webform.
Is there any task that is being remaining ?
URL will look like after pressing button.
http://www.website.com/colorbox/node/add/boarding?width=800&height=500&destination=node/17

Please help me to sort it out.

Thanks

Took me a while to work out, but with the Markdown Filter module, the syntax to use is ...

[![Alt text](../sites/default/files/pictures/test.jpg "Title")](../sites/default/files/pictures/test.jpg "Title"){.colorbox}

No need for all those WYSIWG / Ckeditor / IMCE complications with Markdown!

Hi there,

I can see the template inside the popup the second time I click. First time opens a new page.

Do you have any idea about how to solve that?

This is the link:
print "<a class='colorbox casualty-link colorbox-inline' href='/timeline/casualties-popup/".$conflict."/".$fullDate."'>$casualties[$currentDayPadded]</a>";

This is the template:

<div class="popup-content">
  <h2><?php print $date; ?></h2>
  <div class="cemeteries">

    <?php foreach($cemeteries as $cemetery): ?>
      <div class="cemetery">

        <?php if(isset($cemetery->display_img)): ?>
          <img src="<?php print $cemetery->display_img ?>">
        <?php endif; ?>

        <h3><?php print $cemetery->cemetery_name; ?></h3>
        <span class="casualty-count">(<?php print $cemetery->casualty_count; ?>
          <?php if($cemetery->casualty_count > 1) print 'casualties'; else print 'casualty'; ?>)
        </span>

        <?php if(!is_null($cemetery->cemetery_description)): ?>
          <div class="cemetery-description"><p><?php print $cemetery->cemetery_description ?></p></div>
        <?php endif; ?>

        <span class="view-casualties">View Casualties</span>

        <div class="cemetery-casualties">
          <?php foreach($casualties[$cemetery->cemetery_nid] as $casualty): ?>
            <div class="casualty">
              <ul> 
              <div class="casualty-name">
                <a href="/<?php print drupal_get_path_alias('node/'.$casualty->casualty_nid); ?>" target="_blank"><?php print $casualty->casualty_name; ?></a>
              </div>
              <div class="casualty-rank">
                (<?php print $casualty->rank; ?>)
              </div>
              <div class="casualty-service-number">
                <span class="label">Service Number:</span>
                <?php print $casualty->service_number; ?>
              </div>
              </ul>
            </div>
          <?php endforeach; ?>
        </div>

      </div>
    <?php endforeach ?>

  </div>
</div>

And this is the js working inside the colorbox popup:

jQuery("document").ready(function($){
    $('a.casualty-link').colorbox({
        rel:'nofollow', 
        width: "40%",
        height: "60%",
        href:function(){
            var path = $(this).attr('href');
            path = path.concat(" div.popup-content");
            return (path);
        },
        onComplete:function(){
            $(".view-casualties").click(function() {

                if($(this).hasClass('active')){
                    $(this).removeClass('active');
                    $(this).text('View Casualties');
                    $(this).next(".cemetery-casualties").hide().slideUp( "fast", function() {});
                }
                else{
                    $(this).addClass('active');
                    $(".view-casualties").text('View Casualties');
                    $(".cemetery-casualties").hide();
                    $(this).text('Hide Casualties');
                    $(this).next(".cemetery-casualties").show().slideDown( "fast", function() {});
                }
            });
        }});

    
    

});

There seems to be some discussion and interest about grouping links and showing multiple images in one colorbox slideshow. In one post it is was suggested to use the 'rel' attribute to group links, and I found this didn't work in my installation (D8). The link configuration that did work for me was...

<p><a class="colorbox" data-colorbox-gallery="AAA" data-entity-type="file" href="/sites/YourSide.com/files/yourImage1.JPG">link1</a></p>

<p style="display:none;"><a class="colorbox" data-colorbox-gallery="AAA" data-entity-type="file" href="/sites/YourSide.com/files/yourImage2.JPG">link2</a></p>

Noticed that in the second link I set it's style to display:none, in case you just want to have one link to open the slideshow.

I also had to turn off Mobile detection on colorbox settings in order to get it to work on the cell phone.

And the Enable - Colorbox load and inline in the settings? Where is that for D8?

... I will spare you all my rant about my how long I spent dinking around trying to get a slideshow to work, when I just happened upon this solution... and how everything seems to be half baked and filled with inaccuracies these days. It seems that something referencing this should have been put into the documentation. However... there is nothing like the relief of finally getting something to work after hours of maddening frustration and wild goose chases - it's kind of like that feeling of relief you get after you vomit!

Hope this helps someone.

not work on drupal 9 :(

Not Found
The requested URL /modules/contrib/colorbox/images/admin/example_stockholm_syndrome.png was not found on this server.

my js locate at: /libraries/colorbox/jquery.colorbox-min.js