Multiple gallery demo?

[GoogleCodeExporter]

Are any examples of multiple galleries available?  I've had no luck in
finding any on-line, and my efforts to rename the appropriate classes and
selectors have been unfruitful.  

I have attached my files, and the test page is viewable online at
http://amandachan.net/pastsites/v3/test.shtml, but it may break if I'm
actively working on it.  :P  

Right now I haven't replaced the thumbnails or anything.  I'm focusing
solely on the function and getting two or more galleries to work on the
same page; I'm not sure what I'm doing wrong, but I bet it's something
small and vital!

Thanks for any help in advance.  This is really a great plug-in!  

Original issue reported on code.google.com by amcha...@gmail.com on 28 Dec 2009 at 3:51

Attachments:

• test_galleriffic.css
• test_test.shtml

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

You had the right idea in that you needed to make the IDs unique so you can 
load the
pictures in the right gallery when you click on a thumbnail.  Instead of using a
different name like gallery_work or gallery_fun, however, you can simply append 
a
number at the end of each ID such as thumbs0 and thumbs1.  That would make 
those IDs
unique.

HTML:
So the first thing I did was to duplicate the gallery and then go through each 
ID. 
For the first gallery, I changed all the IDs by adding the number 0 to them (so
#thumbs0, #slideshow0, #caption0, etc.).  For the 2nd gallery, I made the IDs
#thumbs1, etc.   I also decided to wrap each gallery with a wrapper div with the
class name "each-gallery".  This will become useful later as we try to modify 
the script.

Script:
Now that I have made changes to the HTML, I will need to change the javascript. 
 The
basic concept is that I'm going to use a for loop so that as I loop through each
gallery, I will have an integer i that I can use to append to IDs.  The integer 
i
starts with 0, and as I loop through, it becomes greater by 1 each time.  So the
value of integer i in the first gallery will be 0 and that's why I had added 0 
to all
the IDs in the first gallery in the HTML above.  I wrap most of the script in 
this
for loop: $(".each-gallery").each(function(i) and then I have to go into the 
loop and
find instances of the IDs and add "+ i" to them so that, when the page is 
loaded, the
script will work for all galleries.

I hope i haven't made it too confusing.  Let me know if you have any questions.

Original comment by hiphop.s...@gmail.com on 4 Jan 2010 at 11:05

Attachments:

• example-2.html

[GoogleCodeExporter]

Thanks for the explanation and taking the time to do this!  I appreciate this
immensely.  I'll take a look at it, and let you know how it goes, hehe.  

Original comment by amcha...@gmail.com on 10 Jan 2010 at 8:45

[GoogleCodeExporter]

Woo!  I finally got it working beautifully, and it makes sense now.  Thank you 
so, so
much for clearing up the confusion for me.  I'm excited to finish my project 
now.  ^_^

Original comment by amcha...@gmail.com on 19 Jan 2010 at 2:32

[GoogleCodeExporter]

thanks so much for this! i found it extremely useful :)

Original comment by catladyd...@hotmail.com on 24 Jan 2010 at 6:02

[GoogleCodeExporter]

Is there any way to initialize each gallery differently too?
I want to use multiple galleries, with one starting automatically and the other 
not...
I hope this is possible!

Original comment by RachelJN...@gmail.com on 1 Feb 2010 at 11:00

[GoogleCodeExporter]

Thank you hiphop.stitch your post helped tremendously.

Original comment by ch...@indiegraphic.com on 26 Feb 2010 at 1:35

[GoogleCodeExporter]

Thank you for a great plugin!

I'm trying to implement 3 galleries on one page. I was trying to follow your 
sample
but it didn't work for me. Looking at your sample (example-2.html) it does not 
seem
to be working propery eather, because the first gallery does not display 
information
like: caption or download. Am I right?
I would be very grateful if you have a look at my website:

http://www.infinitadesign.net/infinitadesign/index.html

Thank you
k

Original comment by sankows...@gmail.com on 9 Mar 2010 at 5:30

[GoogleCodeExporter]

snakowskak, the thing is that this example is correct, except for a few minor 
things. 
Look at the declaration of the containers, they have to match at all cost with 
the 
divs. For example, the first gallery, it needs to be #thumbs0, #caption0, 
#slideshow0, 
#controls0 and #loading0. If it's not, it will not work.

Original comment by nova.ang...@gmail.com on 12 Apr 2010 at 7:14

[GoogleCodeExporter]

hip.hop stitch, thank you very much your example-2.html was extremely 
helpful... cheers

Original comment by nuggetsi...@gmail.com on 29 Apr 2010 at 2:03

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Love your gallery. I’m a designer(not developer) trying to rebuild my site 
with an
accordian and your galleriffic. Got it working with one gallery, but can't 
figure out
how to get multiple thumbnail galleries that work with the same slideshow 
container.

I looked at your comments on-line, and on the googlecode blog, but don’t know 
how to
troubleshoot. Not familiar enough with js to know how to use this:

Customized the pageload(hash) method that is called by the history plugin as 
such:
    Determine which set of thumbs is being invoked using some jQuery trickery like 
such: var thumbContainerId = $('div.navigation 
a.thumb').eq(+hash).parents('div.navigation').attr('id');
    Hide all "thumbnail containers" except the one in context (determined by the 
previous step)
    Call $.galleriffic.goto(hash);

 The main page shows the page working before I modify script to add multiple
galleries. Click on the recentWorks link and the multiple gallery page
shows.  I tried theexample2 here(googlecode), but it’s not working either. 

Thanks so much

url is 
http://www.newmandesigns.com/NewmanDesignsSite/
(thumbnails showing intent are under recognition posters link)

Original comment by v2kuman@gmail.com on 25 May 2010 at 9:49

[GoogleCodeExporter]

I just want to say this is great!  I highly recommend that an example of 
multiple galleries gets on the main page-especially since it is listed as one 
of the features! :-D

Thanks for teaching me how to do a for loop in javascript :-D

Original comment by joel%rat...@gtempaccount.com on 18 Jul 2010 at 7:45

[GoogleCodeExporter]

Hi everybody,
I try this and I got 4 galleriffics on a page, works. 
Anyway, the mouseover don't work on the THUMB ...

I think that there is a little problem on the javascript for this function =>

 // Initially set opacity on thumbs and add
                                        // additional styling for hover effect on thumbs
                                        var onMouseOutOpacity = 0.50;
                                        $('#thumbs ul.thumbs li').opacityrollover({
                                                mouseOutOpacity:   onMouseOutOpacity,
                                                mouseOverOpacity:  1.0,
                                                fadeSpeed:         'fast',
                                                exemptionSelector: '.selected'
                                        });

Some can help me please?

Original comment by Ludovic....@gmail.com on 6 Oct 2010 at 2:25

[GoogleCodeExporter]

Hi everybody,
I try this and I got 4 galleriffics on a page, works. 
Anyway, the mouseover don't work on the THUMB ...

I think that there is a little problem on the javascript for this function =>

 // Initially set opacity on thumbs and add
                                        // additional styling for hover effect on thumbs
                                        var onMouseOutOpacity = 0.50;
                                        $('#thumbs ul.thumbs li').opacityrollover({
                                                mouseOutOpacity:   onMouseOutOpacity,
                                                mouseOverOpacity:  1.0,
                                                fadeSpeed:         'fast',
                                                exemptionSelector: '.selected'
                                        });

Some can help me please?

Original comment by Ludovic....@gmail.com on 6 Oct 2010 at 2:26

[GoogleCodeExporter]

I feel like I'm close, but the second gallery tries to load but never does.
Each gallery is within a tab.  Don't think this is the problem, but.....

Any help much appreciated

Original comment by nancytim...@me.com on 9 Dec 2010 at 7:24

Attachments:

• ourcollection_multiple.html

[GoogleCodeExporter]

O hai, I got it to work!! My bad.  I had id="each-gallery" in one place and 
class="each-gallery" in the other!

DUH.

Thanks for working solution, hiphop.stitch!

Original comment by nancytim...@me.com on 10 Dec 2010 at 3:10

[GoogleCodeExporter]

Thanks a lot, great work.

Original comment by bobradho...@gmail.com on 24 Feb 2011 at 10:58

[GoogleCodeExporter]

Awesome work user "hiphops..."  Next question, has anyone gotten this to work 
with the history plugin?  Thanks! - Tim

Original comment by teeem...@gmail.com on 8 Jun 2011 at 3:04

[GoogleCodeExporter]

can someone help this doesnt seem to be working for me,

Original comment by bwalke...@gmail.com on 23 Aug 2011 at 4:37

Attachments:

• gallery-1.html

[GoogleCodeExporter]

Oh, that is great, happy to find this, I was searching long for a handsome, 
fast jquery gallery with multiple instances. Thanks for your work here - and of 
course the work of Trent Foley. 

Warm Regards
Jörg

Original comment by joe...@gmail.com on 22 Nov 2011 at 3:25

[GoogleCodeExporter]

Thanks, its work a charm! I have one problem after implementing this method. 
When the gallery loads initially it replicates the first image underneath. Once 
you click on any others the "Show Caption" is visible and will work for all 
sub-galleries. If you refresh it still works ok, it is only when a forced 
refresh or reloading the site causes for that first image to duplicate.

http://www.botanic-illustration.com/test/gallery.html#1

If anyone has experienced this or is up for looking at my code that would be 
great.

Thanks in advance!

Original comment by dirtymole on 24 Nov 2011 at 11:30

[GoogleCodeExporter]

love it!

Original comment by herrfisc...@gmail.com on 16 May 2012 at 1:07

[GoogleCodeExporter]

thank you "amcha" for raising this issue 
And
thabks for "hiphop.s" for the great salutation. 

Original comment by purevo...@gmail.com on 10 Jun 2012 at 8:22

[GoogleCodeExporter]

Thanks "hiphop.s" , your example helped me a lot!

I managed to appky it to my need, but With a small twist : both galleries apply 
the image to the same slideshow container,

so instead of having "#thumbs0" thumbnails change the image in "#slideshow0", 
and "#thumbs1" thumbnails change the image in "#slideshow1" , i have them both 
set to change the image in "#slideshow" .

This is because i use tabs to separate 2 different categories of thumbnails, 
that change the image in one single slideshow container.

i did this by setting imageContainerSel to '#slideshow', instead of 
'#slideshow'+i like in the example.

The problem:

on page load, both galleries load their first image to #slideshow at the same 
time, so on initial page load, the image appears twice, one below the other. 
Only after clicking on a different thumbnail the second image disappears and 
everything works as expected.

How do i fix this problem?

Original comment by avishai....@gmail.com on 11 Jun 2012 at 9:02

[GoogleCodeExporter]

Thanks a lot....
Solved my lots of problems.....
Very nice plugin to use with jTabs...

Original comment by mailsvi...@gmail.com on 22 Sep 2012 at 6:45

[GoogleCodeExporter]

Well done hip-hop, simple copy and paste and then plugged in the styles.
Worked wonderfully, thank you so much!

Original comment by sgraffit...@gmail.com on 12 Mar 2013 at 11:48

[GoogleCodeExporter]

Cheers also to amcha for bringing up this question!

Original comment by sgraffit...@gmail.com on 12 Mar 2013 at 11:48

[GoogleCodeExporter]

Thanks, man! solved my problem!

Original comment by c...@cafedas4.com on 2 May 2013 at 12:15

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Solution Thumbs problem (OPACITY HOVER):

                                $(".each-gallery").each(function(i){
                                        // Initially set opacity on thumbs and add
                                        // additional styling for hover effect on thumbs
                                        var onMouseOutOpacity = 0.67;
                                        $('#thumbs0 ul.thumbs li').opacityrollover({
                                                mouseOutOpacity:   onMouseOutOpacity,
                                                mouseOverOpacity:  1.0,
                                                fadeSpeed:         'fast',
                                                exemptionSelector: '.selected'
                                        });
                                        $('#thumbs1 ul.thumbs li').opacityrollover({
                                                mouseOutOpacity:   onMouseOutOpacity,
                                                mouseOverOpacity:  1.0,
                                                fadeSpeed:         'fast',
                                                exemptionSelector: '.selected'
                                        });

Original comment by shaoto...@gmail.com on 25 May 2013 at 8:45

[GoogleCodeExporter]

can any one help me in one thing by in place of image in right side i need text

Original comment by singh.sh...@gmail.com on 2 Aug 2013 at 7:52

Attachments:

• galleriffic-2.0.zip

[GoogleCodeExporter]

Hip-hop the solution is semi working for me. The thumbnails are appearing but 
no the large image. Where I am going wrong. I am using Nextgen Gallery plugin 
with Gallerific script in my Wordpress theme. Here is the link to it
http://www.willtechinternational.com/client/jerry-f/chelseaguesthouse/cms/?page_
id=53

Original comment by ayushinf...@gmail.com on 17 Oct 2013 at 5:22

[GoogleCodeExporter]

Firstly, thank you for the useful tip!
Actually, I have after I used this tip,
the next, prev, and slideshow button disappeared.
Do anybody know how to fix it?

imageContainerSel:         '#slideshow'+ i,
                    controlsContainerSel:      '#controls' + i,
                    captionContainerSel:       '#caption' + i,
                    loadingContainerSel:       '#loading' + i,

This part seems the problem but as you know if i delete + i, the gallery doesnt 
work.
Thank you.

Original comment by shiny...@gmail.com on 29 Nov 2013 at 7:17

[GoogleCodeExporter]

hiphop, I know you'll probably never read this since it's been 4 years since 
your comment, but you are a mad genius. Thank you so so so much, your code 
worked for me after trying on and off for longer than I want to admit. Drinking 
to you tonight!

Original comment by missioni...@gmail.com on 21 Feb 2014 at 4:41

[GoogleCodeExporter]

By the way, I also was having the same problem with the mouse rollovers not 
working like Ludovic was having. I used shaotonio's solution, which fixed the 
functionality, but I was still experiencing some slowness and flickering with 
the mouseovers. So instead of fadeSpeed: 'fast', I changed the values all to 
fadeSpeed: 20, and now the mouseovers work much more smoothly.

Original comment by missioni...@gmail.com on 21 Feb 2014 at 7:30

[GoogleCodeExporter]

WELLDONE HIPHOP@GMAIL YOU NAILED IT IN HAVING MULTIPLE GALLERIFIC GALLERIES. 
THANKS TO YOU I GOT MINE  WORKING. I WAS TRYING CHAING IDS TO CLASSES BUT IT 
GOT ME NOWHERE CLOSE AS YOUR SOLUTION

Original comment by man...@untangledmedia.com on 25 Apr 2014 at 12:45