Adding image number/count to image galleries

[Craig Wassel]

I'd like to add "image 1 of x" titles to my galleries, I've done quite a bit of reading on this, but I have not gotten anything to work. 

Right now, my production galleries are working great at:  https://www.craigwasselphotoart.com/portrait_and_event_photography/main.htm

My snippet of script from this page is:

jQuery(document).ready(function ($) {
      $(".fancybox").click(function () {
          $.fancybox.open(window["" + $(this).data("album") + ""], {
              helpers : {
                  thumbs : {
                      width : 75,
                      height : 50
                  }
              }
          });
      });
}); // ready

My latest attempt to get image count going is at:  https://www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm

My snippet of edited script from this page is:

jQuery(document).ready(function ($) {
      $(".fancybox").click(function () {
          $.fancybox.open(window["" + $(this).data("album") + ""], {
   helpers :
                  thumbs : {
                      width : 75,
                      height : 50
                  }
   {
title : { type : 'over' }
}, // helpers
beforeShow : function() {
this.title = (this.title ? '' + this.title + '' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
} // beforeShow
}); // fancybox
}); // ready

Thanks much,

Craíg

[Alexander Dixon]

Hi Craig,

I'd be willing to help you set this up.  Could you tell me what fancybox library you are using (1.2 or 1.3)?

I took the liberty to clean up your JavaScript code so that it is slightly easier to read and we can notice any syntax errors.

The below code returns no errors if validated against in jsfiddle.  I created a variable that will hold all of the functionality you want to be passed in but please kindly first that the below is working before we proceed.

Fiddle Sandbox

jQuery(document).ready(function ($) {

    var nextOfVar = "1 of 2";

    $(".fancybox").click(function () {

          $.fancybox.open(window["" + $(this).data("album") + ""], {

              helpers : {

                  thumbs : {

                      width : 75,

                      height : 50

                  },

                  title : { 

                      type : 'over' 

                  }

              }

          });//open

          beforeShow : {

              return nextOfVar;

          }// beforeShow

        }); // fancybox

    }); // ready

Thank you,

Alex

[Craig Wassel]

Craig

I am new to using FancyBox and just recently downloaded 2.1.5, so I believe I am using the 1.3 library.

Craíg 

[Craig Wassel]

I just updated the test page with your clean-up code above, and it is working - short of the image count at this point.

I really appreciate your help on this, Alex.

Craíg

On Monday, July 6, 2015 at 11:25:45 AM UTC-5, Craig Wassel wrote:

[JFK]

check http://stackoverflow.com/a/16686148/1055987

[Craig Wassel]

Thanks, JFK

I did find those threads in my search.  I'll try again to combine what is documented there with what I currently have working, which is where I have not been successful.  Alex's mod is working, but does not yet have the final piece to add the image count.

Craíg

[Craig Wassel]

Hi, Alex

Since the test page is working with your script applied to my test page, what is the last bit of edit to apply to add the "count"?  I am using a new install of 2.1.5

Sincere thanks for any/all help.

Craíg 

[JFK]

Also you could check http://stackoverflow.com/a/13942253/1055987

[Craig Wassel]

Craig

I *think* maybe where you were trying to lead me was to simply add the helper section of javascript you referenced (http://stackoverflow.com/a/13942253/1055987) to my test page as opposed to trying to combine it with what I already have(?)  That's what I did, and my test page at https://www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm is working properly.  That should leave just getting the syntax of the image titles correct to get the image count working(?).  I've been looking for a FancyBox example where the title is set in a "var fancybox_name = [{href:'image_name.jpg'}," but can't find one.  Do you have a link for that I can reference?

Thanks, JFK

Craíg

[Alexander Dixon]

Hi Craig,

I'm glad you that you upgraded to fancybox 2.0.  It seemingly has streamlined functionality and easier to implement API.

As far at the variable is concerned you can create them by targeting the href attribute.

var titleName = $(this).closest('a').attr('href');

$('img').attr('title', titleName);

The above two lines should automatically apply a title to all the images on the page that are wrapped in an anchor, and presumably, have the fancybox functionality applied.

I am also assuming that you are using relative pathing to target the images only and not the full directory.  I'm sure that there is also some way to replace that text as well but I will defer to JFX to confirm what I have submitted is correct.

Kind regards,

Alex

[Craig Wassel]

Thank you, Alex

I have your script - including what you provided for the var - on test link below.  The page loads, but the images don't show a count so there is something I am still not understanding/missing.  I'll take a look again at the FAQs and the links JFK has provided to see if I can figure it out.

https://www.craigwasselphotoart.com/portrait_and_event_photography/main_test_alex.htm

Craíg

[Alexander Dixon]

Hi Craig,

Replace everything I have given you so far with what JFX has provided. I had you trying to set a "title" attribute on an img take (which is bad HTML).

$("a[rel=img_gallery]").fancybox({
    helpers: {

        title: {
            type: 'over'
        }
    },
    // helpers
    beforeShow: function() {

        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');

    } // beforeShow
}); // fancybox​

Then, you need to make a declaration to add a "rel" attribute to all the fancybox links, with the value of "img_gallery".

$('img').closest('a').attr("rel", "img_gallery");

Lastly, automatically set the title of all the images to be the name of the image in the directory.

// Creates a variable that fills as the source of the image

var titleName = $(this).attr("src");

// Sets title of all the images on the page to their coresponding image name

$('img').attr('title', titleName);

JFK has a working demo

http://jsfiddle.net/BP2Ew/

I see that you have many images on the page which is why I'm trying to streamline the process of adding the attributes in one fell swoop rather than manually adding them all.

I hope this works.

Thank you,

Alex

[Alexander Dixon]

Hi Craig,

I got the whole thing working as intended.  Please review my jsfiddle in the following link:

http://jsfiddle.net/dixalex/hbgtL3p7/12/

All sources of my work can be found in the comments of the code.  All credit goes to JFK for the awesome fancybox toolkit.

Feel free to copy my code in the jsfiddle and drop it in (replace all of your code).  It will automatically apply rel attributes and the appropiate paremeters to function with the fancybox gallery.  It will also automatically insert a title onto all the images on your page, using the image that of the file.

If you're ever in the Massachusets area let me know as you take incredible pictures.

May God bless you,

Alex

On Monday, July 6, 2015 at 12:25:45 PM UTC-4, Craig Wassel wrote:

[Craig Wassel]

Thank you very much to you and JFK for all of your help.  I copied the jfiddle up to the test page and will test it out.  Gotta finish getting ready for a long day of shooting tomorrow.

Craíg

[Craig Wassel]

One more "thank you" to the both of you (Alex and JFK) for all your help.  I ended up with this as my production code:

jQuery(document).ready(function ($) {
      $(".fancybox").click(function () {
          $.fancybox.open(window["" + $(this).data("album") + ""], {
              helpers : {
                  thumbs : {
                      width : 75,

                      height : 50,
                      title : {
                       type : 'inside'
                   }
                  }
              },
              beforeShow : function() {
       this.title = (this.title ? '' + this.title + '<br />' : '') + 'Photograph ' + (this.index + 1) + ' of ' + this.group.length;
     } // afterLoad

          });
      });
}); // ready

For anyone who wants to reference the production pages, they are:

https://www.craigwasselphotoart.com/portrait_and_event_photography/main.htm

and

https://www.craigwasselphotoart.com/photographic_art/main.htm

Craíg

On Friday, July 10, 2015 at 9:36:33 PM UTC-5, Alexander Dixon wrote: