Topic Closed
Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

Been playing with Colorbox more and found this little peace of js

var yourdiv = $("div.GPAREA");
var images = yourdiv .find("img:not(a > img)");
 
images.each(function i() {
var $this = $(this);
$this.wrap('<a name="gallery" rel="gallery_gallery" href="' + $this.attr("src") + '"/>');
});
 
This will add the needed name & rel attributes to images and if colorbox if on (see docs) then all images on the page will open in colorbox without adding the href, name, and rel
 
The code needs to be placed after the get content output function.  
 
Question I have for those who know JS. . . how can we make that convert the alt="" into the caption for colorbox?
 
Colorbox uses the title attribute for the caption. I found some code that supposedly does it but I can't combine them.

 

var imageCaption = $(image).attr('alt');
 
 
10 years ago#739

which file and where do we add this code?

10 years ago#756

Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

The code needs to be placed after the get content output function.

The get content output function is in your theme = <?php $page->GetContent(); ?>

You can also call any JavaScript within a page in gpEasy--place this code at the end of your content the page you want it to work for. You can either place the entire code in the page (add your open & close <script>) or save it in a file and call it from that separate js file. The main point is that it MUST come after <?php $page->GetContent(); ?> which calls the page content.

After playing with it for a while I don't recommend using it on the front page of your site if you have lots of images there. It seems to take a while to fully load everything when you have many images and you definitely don't want the front page loading slowly.

UPDATE

I made a tutorial for this, see this gpEasy tutorial

Edited: 10 years ago#764

<script src="/foler/File_Name.js" type="text/javascript">
        var yourdiv = $("div.GPAREA");
        var images = yourdiv .find("img:not(a > img)");

        images.each(function i() {
        var $this = $(this);
        $this.wrap('<a name="gallery" rel="gallery_gallery" href="' + $this.attr("src") + '"/>');
});
</script>

What do I insert here : "/foler/File_Name.js" ?

I tried adding the path of the colorbox javascript but it doesn't work.

Edited: 10 years ago#816

Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

Sorry, made a little mistake there. . . corrected.

You can see the full tutorial now - auto add name rel to img in gpEasy

Also note that the gpEasy 1.7 will only need name="gallery" to open in colorbox

rel="gallery_gallery" will link them as a gallery

10 years ago#830

This works but only in images where the image and its enlarged link are the same with the image reduced in size.

But if I use the thumbnail generated by gpeasy and link it to the original image imported inside the _uploaded/image folder then colorbox does not work. Why?

10 years ago#833

Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

That's the proper way for it to work. Colorbox is not magically picking up the full sized image. If you look at a gallery in gpEasy you will see the <a href="">  linking the main image and the <img > is linking the thumbnail. 

You can do the same thing with single images; however, once you link the image with an <a href=""> the script won't work--it's designed not to work on images that are already linked as that would be very problematic. 

So, if you want to use your thumbnail and link the main image you are back to adding the href, name, and rel manually.

10 years ago#834

Adding colorbox like this has its own set of problems. Now all the images included in a page are linked to themselves even if I have used them at full resolution. Is there any way to remove this? Ideally there should be a code that adds the colorbox coding only to those images which are linked to something.

10 years ago#837

Charles S
448 Posts
13.7K Downloads
2 Themes
8 Plugins

yes, that's what the tutorial tells you it will do ;)

Every image on a page or theme depending on where you put the code.Everything has it's trade-offs.

10 years ago#840

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register