PDA

View Full Version : prettyPhoto-How to load gallery ??


johnMoss
09-12-2011, 08:32 PM
Has anyone used the prettyPhoto JQuery scripts? If so...
I cannot figure out the most basic component, the gallery. Where are the image calls stored? I've gone through every last line of code in the js.

In other words:
<a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="sample"><img src="images/page3_img1.png" alt="test"></a>

The rel call of course runs the js, and in this case it's a lightbox clone. The first image is of course the display image, and when run, the lightbox opens and has (here) 6 images one can scroll through. The images are in the regular images file. What I can't find is where these images are being called from; the links. This prettyPhoto [group1]... Where is it hiding? Seriously I must be blind but I absolutely cannot find it...

Anyone?

domedia
09-12-2011, 09:03 PM
At their web site they have some examples:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

Look specifically at the example for gallery.

Not sure what you're asking for. The SRC attribute calls the thumbnail image, and the HREF attribute calls the larger image. Keep in mind the code you pasted in only works for one image. You need to add another line for a second image.

johnMoss
09-12-2011, 09:16 PM
(This page is under construction and hidden...)
http://www.johnmossdesigns.com/gallery.html

I just don't understand the calls... There are 6 boxes, and in this template example all boxes are using the same images. So I am assuming somewhere there is a group 1 hiding out. If the image calls are supposed to be directly in the page, how does this thing work? Talk about driving me nuts! :(

johnMoss
09-12-2011, 09:32 PM
I guess I should also point out I've been all over the web looking for an answer, posted a question on the author's forum... youtube...nada... they never address the issue of loading each window's gallery...

domedia
09-13-2011, 01:37 PM
It looks good to me John, I think you figured it out :) Looks great btw.

.

johnMoss
09-13-2011, 02:47 PM
Thank you :)
The problem is still unresolved though. On that gallery page what you see is a piece of JQuery pulled directly from a template. Which is to say the images are stock photos. I want to replace the stock photos with mine. Here's the deal:
There are 6 viewers on the page. Each viewer holds a gallery, in this case 6 images each. In this demo version, there are only a total of 6 pictures they are using; i.e. all the same images used recurrently in each viewer. The idea of course is to have these 6 separate viewers showing independent material.
The rel call should assumedly be to some hidden div, or JS gallery named here prettyPhoto[group1]. Objective is to create 6 unique galleries with independent imagery. What I'm not finding out there are direct instructions. Specifically I do not understand how each window's pop-up gallery is getting it's material. The prettyPhoto rel attribute calls the script, but where are the gallery image links within the JS, or wherever they may be? Right now still baffled, each line of code for each viewer on the html page gives it's starting image, it's 'run script' first image, and that's it. Where are the other 5 links for the rest of the gallery hiding?

www.johnmossdesigns.com/gallery.html (http://www.johnmossdesigns.com/gallery.html)

domedia
09-13-2011, 03:31 PM
I think you got it wrong John,
The viewer will slide through the large images for the thumbnails you have. There's not multiple images 'hiding' behind each thumbnail. It works like a regular image gallery.

gentleone
09-13-2011, 03:39 PM
Yes John, it just works like any other lightbox gallery and how it should be.

johnMoss
09-13-2011, 05:31 PM
In examining the code, one sees one thumbnail and 1 image for each of the six viewers. 6 images total are in each individual gallery. How [where] does each viewer get the command to continue to pull the other 5 images not written in their individual lines of code? I do understand the gallery is pulling thumbnails, but from where? How do I modify? Thanks guys, & sorry, I'm just not seeing it...

gentleone
09-13-2011, 06:19 PM
How [where] does each viewer get the command to continue to pull the other 5 images not written in their individual lines of code?
The command is [group1] after 'prettyPhoto' in the rel attribute. This will tell the javascript that the images belong to each other, so it pulls them up as a photo album thing in the lightbox modal.

I do understand the gallery is pulling thumbnails, but from where? How do I modify?
This is the big image which opens in the lightbox modal by clicking on the thumbnail.
href="images/big_img1.jpg"This is the class that's needed to style the lightbox modal
class="lightbox-image"This is to fire the lightbox modal
rel="prettyPhoto[group1]"This is the caption underneath the photo in de lightbox modal
title="Pellentesque quis">This is the thumbnail photo.
<img src="images/page3_img1.png" >

johnMoss
09-13-2011, 06:33 PM
This is the thumbnail photo.
<img src="images/page3_img1.png" >

I see those of course, but what about the other 5 in the gallery? :confused:
That's where I'm thrown...

The viewer rolls though 5 more thumbnails: images/page3_img1.png through images/page3_img6.png.

Click on the active viewer & you'll see.

www.johnmossdesigns/gallery.html (http://www.johnmossdesigns/gallery.html)

gentleone
09-13-2011, 06:36 PM
I know and that is what [group1] is for. It wiil group the 6 images in the lightbox modal. If you delete [group1] from the rel attribute, it will just be seperate images that will open in the lightbox modal if you click on a thumbnail.

gentleone
09-13-2011, 06:39 PM
Those other 5 images are just the large photos from the other thumbnails on your gallery page.

johnMoss
09-13-2011, 07:05 PM
I know what they are, but don't know why they are there. Where is the command structure for group1? In the end where I'm going with this is I need to create separate groups for each of the 6 viewers, i.e. manipulate group 1 and then create 5 new groups with different images than the other viewers. Where do I go or how would I write this in? I couldn't find a tutorial at that level of detail. They all talk about the galleries, but not how to add/remove images except for just the single one shown in the code. Do I just write in new code & add the images there? Get rid of the group? Make a new group?

gentleone
09-13-2011, 07:21 PM
Where is the command structure for group1?
[group1] is just there so the javascript knows the 6 images on the page belong to each other as a gallerry. You can name it what ever you want, as long as they are named the same.
In the end where I'm going with this is I need to create separate groups for each of the 6 viewers, i.e. manipulate group 1 and then create 5 new groups with different images than the other viewers.
Lightbox galleries don't work like that. As far as I know they all work with this same principle. You can make as many groups as you want, but all the thumbnails has to be on the page and big images in the href attribute in order for it to work.

domedia
09-13-2011, 07:43 PM
Lightbox galleries don't work like that. As far as I know they all work with this same principle. You can make as many groups as you want, but all the thumbnails has to be on the page and big images in the href attribute in order for it to work.
Just wanted to +1 this. I can see what you want done John, but Lightbox does not work like that.

johnMoss
09-13-2011, 07:45 PM
Ok cool, that takes care of most of the mystery. Can I not add thumbnail images to each window separately and get rid of the group call? Sounds like I'm getting ready to throw on my chef's hat with this puppy...

johnMoss
09-13-2011, 07:52 PM
Just wanted to +1 this. I can see what you want done John, but Lightbox does not work like that.

So standard procedure is only one viewer allowed per page? What about separate script calls in the head? Can I not have independent viewers with individually assigned images?

I could see a simultaneous run would cause issues, but with the way these viewers operate, by default there would never be more than one script sequence running...
Thoughts?

gentleone
09-13-2011, 07:55 PM
You could fake it... sort of the dirty way, by showing only the first thumbnail of a group. Just give the rest of the thumbnails of that group an extra class called thumb-hide or something and hide them with display: none in your CSS.

Other then that you'll have to do a google search for a gallery that comes close to what you want or team up with a javascript/jQuery developer to write a custom script.

johnMoss
09-13-2011, 08:24 PM
You could fake it... sort of the dirty way, by showing only the first thumbnail of a group. Just give the rest of the thumbnails of that group an extra class called thumb-hide or something and hide them with display: none in your CSS.

I did see where a guy did that very thing & it worked for him. I'll track that down & see what I can come up with. If I can make it work, I'll post the code... Thanx guys...

domedia
09-14-2011, 02:50 PM
So standard procedure is only one viewer allowed per page? No, you can have several on one page.
What about separate script calls in the head? No it would be the same script
Can I not have independent viewers with individually assigned images? Yes, you can. The problem here is your custom implementation.
I could see a simultaneous run would cause issues, but with the way these viewers operate, by default there would never be more than one script sequence running...
Thoughts?
The image slideshow can run several galleries at the same time.

You could fake it... sort of the dirty way, by showing only the first thumbnail of a group. Just give the rest of the thumbnails of that group an extra class called thumb-hide or something and hide them with display: none in your CSS.

This will work. And simple. Great solution to the problem

I did see where a guy did that very thing & it worked for him. I'll track that down & see what I can come up with. If I can make it work, I'll post the code... Thanx guys...

John, I would just implement is like gentleone suggests.
I could write some sample code for you real quick if you want.

.

johnMoss
09-14-2011, 03:15 PM
John, I would just implement is like gentleone suggests. I could write some sample code for you real quick if you want.
In doing so you would save me several hours at the least. If I may, yes please, and thank you :-D
Here's a gallery:

<div class="cols"> <a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Pellentesque quis"><img src="images/page3_img1.png" alt=""></a> <p><strong class="font1">Smaller Sites </strong>Quick, to-the-point sites designed to turn prospects into callers...<br> <a href="#" class="link1">Read more</a></p> </div>

I put the entire div in for measure...

domedia
09-14-2011, 03:47 PM
http://www.johnmossdesigns.com/gallery.html

I'll use this page as me source (don't change it :) ) and will post code in a few minutes.

johnMoss
09-14-2011, 03:50 PM
Thank you !

domedia
09-14-2011, 03:59 PM
ok, so you need to make sets for the different photo galleries, [group1] [group2] etc. These names are what defines which gallery an image is part of. Then we need to hide all the images, apart from the first one you want displayed on the page (per gentleones excellent advice)

So we start off with adding a new CSS rule fore those:
.lightbox-hide {display: none;}

The sample HTML I modified for you only has the two first sets. Add it to the other ones in the same manner.
<div class="cols">
<a href="images/big_img1.jpg" class="lightbox-image" rel="prettyPhoto[group1]" title="Pellentesque quis"><img src="images/page3_img1.png" alt=""></a>
<a href="images/big_img2.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group1]" title="Another Title 1"><img src="images/page3_img2.png" alt=""></a>
<a href="images/big_img3.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group1]" title="Another Title 2"><img src="images/page3_img3.png" alt=""></a>
<a href="images/big_img4.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group1]" title="Another Title 3"><img src="images/page3_img4.png" alt=""></a>
<a href="images/big_img5.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group1]" title="Another Title 4"><img src="images/page3_img5.png" alt=""></a>
<a href="images/big_img6.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group1]" title="Another Title 5"><img src="images/page3_img6.png" alt=""></a>
<p>
<strong class="font1">Smaller Sites </strong>
Quick, to-the-point sites designed to turn prospects into callers...<br>
<a href="#" class="link1">Read more</a>
</p>
</div>
<div class="cols pad_left1">
<a href="images/largesite1.jpg" class="lightbox-image" rel="prettyPhoto[group2]" title="Nullam augue"><img src="images/page4_img2.png" alt=""></a>
<a href="images/largesite2.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group2]" title="Another Title 1"><img src="images/page4_img2.png" alt=""></a>
<a href="images/largesite3.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group2]" title="Another Title 2"><img src="images/page4_img3.png" alt=""></a>
<a href="images/largesite4.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group2]" title="Another Title 3"><img src="images/page4_img4.png" alt=""></a>
<a href="images/largesite5.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group2]" title="Another Title 4"><img src="images/page4_img5.png" alt=""></a>
<a href="images/largesite6.jpg" class="lightbox-image lightbox-hide" rel="prettyPhoto[group2]" title="Another Title 5"><img src="images/page4_img6.png" alt=""></a>
<p>
<strong class="font1">Larger Sites</strong>
Informative shopping sites where the site makes it's own sale...<br>
<a href="#" class="link1">Read more</a>
</p>
</div>

johnMoss
09-14-2011, 04:13 PM
Jim, above & beyond bro, thanx a bunch... I think I'm beginning to understand how the lightbox functions via the code i see. Am I correct in assuming, or perhaps in the right direction, that the rel attribute serves as a identifier as well as a call? In other words, the line of code it sits on calls the command with the rel, and then anything it finds not hidden on the same page AND with the same rel (group1, etc.) will be added to the count (0,1,2,3, etc.) and thus displayed?

domedia
09-14-2011, 04:57 PM
You have a way of making things sound really complicated imho John ;-)

Exmaple: prettyPhoto[group2]

'prettyPhoto' makes it part the jQuery script, that is already running on your page (it's loaded in the header)

[group2] identifies which gallery it is part of.

johnMoss
09-15-2011, 02:54 PM
Ah Ha! The answer is yes.... What is "imho"?
Complicated... Hmm.... I think I'm missing out on a career in Dos Equis commercials. Thanks again :)

domedia
09-15-2011, 03:57 PM
imho - 'in my humble opinion'. :)

johnMoss
09-15-2011, 06:08 PM
Got it... I had a limo company before this, IMHO just takes on a whole new meaning! :)

I played around quite a bit with the javascript trying to get a bigger pop-up window. There are a lot of queries 'bout that on his [author] site, but nothing answered. I don't get the impression anyone is actually moderating. Other than resize sets to true, nothing seems to faze the box. Lightbox shapes to the image dimensions, this one doesn't. No biggie, though it would be nice...

gentleone
09-15-2011, 07:31 PM
Aha... I see Dom explained the dirty solution further for you :)

I played around quite a bit with the javascript trying to get a bigger pop-up window.

The modal resizes to the size of the image. If you want to have a bigger modal then make your images bigger.

gentleone
09-15-2011, 11:04 PM
Lightbox shapes to the image dimensions, this one doesn't.
Oops... sometimes I skim posts too much. Anyways... I will have a look at the Javascript & CSS and see if I can find something.

johnMoss
09-15-2011, 11:32 PM
It looks to be all in the scripting. If you pull it off, we oughta start a new thread with a corresponding title. I scoured the web 4 pages deep on 4 sets of searche queries & found nothing. If you can tweak it, you'll be the first? The last version the author put out was like April 2010...

johnMoss
09-16-2011, 03:13 AM
OK, I'm in idiot mode.... It works fine & will resize to whatever you want when resize is set to true. There's just one catch; you have to put the new image into it's proper place in the code. Who woulda thought....:roll:

promopel
09-29-2012, 09:30 PM
Hy.
Post here how I could solve the gallery of multiple images in a single image - as requested 2010.


<figure class="img-box">
<a href="images/galeria0.jpg" class="lightbox-image" data-gal="prettyPhoto[group1]">
</a><a href="images/galeria1.jpg" class="lightbox-image" data-gal="prettyPhoto[group1]">
</a><a href="images/galeria2.jpg" class="lightbox-image" data-gal="prettyPhoto[group1]">
</a><a href="images/galeria3.jpg" class="lightbox-image" data-gal="prettyPhoto[group1]">
</a><a href="images/galeria4.jpg" class="lightbox-image" data-gal="prettyPhoto[group1]">
<img src="images/lancamento1.jpg" alt=""></a>

</figure>

Thanks.

God bless you!

johnMoss
10-02-2012, 04:48 AM
Propomel did you resolve your problem? If not, start a new thread & restate your question. I do not understand what you are asking for...