My favorites | Sign in
Project Home Issues Source
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 76: Multiple gallery demo?
6 people starred this issue and may be notified of changes. Back to list
Status:  New
Owner:  ----


Sign in to add a comment
 
Reported by amcha...@gmail.com, Dec 27, 2009
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!  
test_galleriffic.css
2.1 KB   View   Download
test_test.shtml
6.8 KB   Download
Jan 4, 2010
#3 hiphop.s...@gmail.com
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.
example-2.html
9.1 KB   View   Download
Jan 10, 2010
#4 amcha...@gmail.com
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.  
Jan 18, 2010
#5 amcha...@gmail.com
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.  ^_^
Jan 24, 2010
#6 catladyd...@hotmail.com
thanks so much for this! i found it extremely useful :)
Feb 1, 2010
#7 RachelJN...@gmail.com
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!
Feb 25, 2010
#8 ch...@indiegraphic.com
Thank you hiphop.stitch your post helped tremendously.
Mar 9, 2010
#9 sankows...@gmail.com
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
Apr 12, 2010
#10 nova.ang...@gmail.com
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.
Apr 28, 2010
#11 nuggetsi...@gmail.com
hip.hop stitch, thank you very much your example-2.html was extremely helpful... cheers
May 25, 2010
#14 v2kuman@gmail.com
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)

Jul 18, 2010
#15 joel%rat...@gtempaccount.com
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

Oct 6, 2010
#16 Ludovic....@gmail.com
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?
Oct 6, 2010
#17 Ludovic....@gmail.com
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?
Dec 9, 2010
#18 nancytim...@me.com
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
ourcollection_multiple.html
12.9 KB   View   Download
Dec 10, 2010
#19 nancytim...@me.com
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!
Feb 24, 2011
#20 bobradho...@gmail.com
Thanks a lot, great work.
Jun 8, 2011
#21 teeem...@gmail.com
Awesome work user "hiphops..."  Next question, has anyone gotten this to work with the history plugin?  Thanks! - Tim
Aug 22, 2011
#22 bwalke...@gmail.com
can someone help this doesnt seem to be working for me,
gallery-1.html
9.1 KB   View   Download
Nov 22, 2011
#23 joe...@gmail.com
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

Nov 24, 2011
#24 dirtymole
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!


May 16, 2012
#25 herrfisc...@gmail.com
love it!
Jun 10, 2012
#26 purevo...@gmail.com
thank you "amcha" for raising this issue 
And
thabks for "hiphop.s" for the great salutation. 
Jun 11, 2012
#27 avishai....@gmail.com
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?
Sep 22, 2012
#28 mailsvi...@gmail.com
Thanks a lot....
Solved my lots of problems.....
Very nice plugin to use with jTabs...
Mar 12, 2013
#29 sgraffit...@gmail.com
Well done hip-hop, simple copy and paste and then plugged in the styles.
Worked wonderfully, thank you so much!
Mar 12, 2013
#30 sgraffit...@gmail.com
Cheers also to amcha for bringing up this question!
May 2, 2013
#31 c...@cafedas4.com
Thanks, man! solved my problem!
May 25, 2013
#33 shaoto...@gmail.com
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'
                                        });
Aug 2, 2013
#34 singh.sh...@gmail.com
can any one help me in one thing by in place of image in right side i need text
galleriffic-2.0.zip
135 KB   Download
Oct 16, 2013
#35 ayushinf...@gmail.com
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
Nov 29, 2013
#36 shiny...@gmail.com
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.
Feb 21, 2014
#37 missioni...@gmail.com
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!
Feb 21, 2014
#38 missioni...@gmail.com
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.
Apr 25, 2014
#39 i...@untangledmedia.com
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
Sign in to add a comment

Powered by Google Project Hosting