4

I am using the jQuery fancybox plugin to create an image gallery. User clicks on an image and then a modal shows up to navigate through all the images. Up to this point, everything is done with the following code .

But the change I want to do is in the modal slide show. The slideshow needs to show the particular image that was clicked on plus other images which are not in the gallery plus extra divs. Those extra images and divs may stay anywhere in the code.

HTML:

<a class="fancybox" href="img/a_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/a_big.jpg"    alt="image project"/>
</a>

<a class="fancybox" href="img/b_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/b_big.jpg"    alt="image project"/>
</a>

<a class="fancybox" href="img/c_small.jpg" data-fancybox-group="gallery" title="Project">
<img src="img/c_big.jpg"    alt="image project"/>
</a>

JS:

$('.fancybox').fancybox({
    padding: 0,
    openEffect : 'elastic',
    openSpeed  : 150, 
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    'autoSize': false,
    'autoWidth'    : 600,
    'autoScale'     : false,
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'type'          : 'swf',
    'autoCenter ' :true,
    'aspectRatio':true
});

1) How to achieve that ?

2) If fancybox is not a good fit, is there any other script that will help to achieve the purpose in a responsive design way ?

EDIT: An online demo is here.

Istiaque Ahmed
  • 6,072
  • 24
  • 75
  • 141
  • I think that you can use some plugin event, like `beforeLoad()` or `beforeShow()`. The idea is add images or whatever you need to fancybox from there. – kosmos May 20 '15 at 10:43
  • @kmsdev, How can I exclude all the images except the triggering one and add other images ? any clue in the doc etc? – Istiaque Ahmed May 20 '15 at 10:54
  • It's just an idea, but you could clone your original container, delete items from the original and add some new ones. When modal closes, just replace the original modified by the cloned one. – kosmos May 20 '15 at 10:58
  • @kmsdev, `EDIT:` added.Firebug shows `` element is out there. I do not know how to handle it. Can you be more specific ? – Istiaque Ahmed May 20 '15 at 11:05

2 Answers2

1

I was looking and I see that if you add data-fancybox-group to other elements that you want to add to the gallery, fancybox gets them and works as expected.

Check this jsFiddle as example (images don't load in jsFiddle but if you copy the code to a file you can se how it works).

PS. You have some incorrect attributes in your images. Look for width11="" and height11="".

kosmos
  • 4,253
  • 1
  • 18
  • 36
  • what is about adding new `div`s that may contain button etc ? And obviously I want the other images ( images that are not in gallery) and `div`s to be hidden in the page – Istiaque Ahmed May 20 '15 at 12:57
  • 1
    About images that are not in gallery, you have only to use `.fancybox` class with the `data-attribute`. Currently, I don't know if it works with divs, I'll take a look. – kosmos May 20 '15 at 14:06
  • Sorry dude, as I saw, it won't work for divs mixed with images grouped by same name. You can see what I tried so far [here](http://i3rt2.kmsdev.net). – kosmos May 20 '15 at 14:38
  • did you use any images that are not in the gallery but will show in the slideshow ? I did not find any such image in your demo. – Istiaque Ahmed May 21 '15 at 09:05
  • Yes, the last image (the latest image in the code) is in another div, but adding the `data-fancybox-group` and setting it to the same name as the gallery, the image will be shown too. – kosmos May 21 '15 at 17:23
  • but the `div` and other images (which are not in the gallery) should be kept hidden before showing them in the show. How to do that ? – Istiaque Ahmed May 24 '15 at 14:58
  • Then you will need to use the `beforeShow` event to show these hidden images. The use is something like `beforeShow: function(){ console.log( $('img', this.element) ); }`. – kosmos May 25 '15 at 06:00
-1

Put this in anchor tag

    rel="group1"
    rel="group1"
    rel="group2"
    rel="group2"

or

     data-fancybox="group_1"
    data-fancybox="group_1"
    data-fancybox="group_2"
    data-fancybox="group_2"

<a data-fancybox="group_<?= $counter ?>" class="fancybox" href="image_path"></a>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
zaman
  • 1
  • 1