logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-12-2011, 07:32 PM   #1
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default prettyPhoto-How to load gallery ??

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:
HTML Code:
<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?
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-12-2011, 08:03 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

At their web site they have some examples:
http://www.no-margin-for-errors.com/.../#!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.
domedia is offline   Reply With Quote
Old 09-12-2011, 08:16 PM   #3
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

(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!
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-12-2011, 08:32 PM   #4
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-13-2011, 12:37 PM   #5
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

It looks good to me John, I think you figured it out Looks great btw.

.
domedia is offline   Reply With Quote
Old 09-13-2011, 01:47 PM   #6
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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
__________________
LinkedIn: jM

Last edited by johnMoss; 09-13-2011 at 01:48 PM.. Reason: ad link
johnMoss is offline   Reply With Quote
Old 09-13-2011, 02:31 PM   #7
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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.
domedia is offline   Reply With Quote
Old 09-13-2011, 02:39 PM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Yes John, it just works like any other lightbox gallery and how it should be.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 09-13-2011, 04:31 PM   #9
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 09-13-2011, 05:19 PM   #10
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by johnMoss View Post
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.

Quote:
Originally Posted by johnMoss View Post
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.
HTML Code:
href="images/big_img1.jpg"
This is the class that's needed to style the lightbox modal
HTML Code:
class="lightbox-image"
This is to fire the lightbox modal
HTML Code:
rel="prettyPhoto[group1]"
This is the caption underneath the photo in de lightbox modal
HTML Code:
title="Pellentesque quis">
This is the thumbnail photo.
HTML Code:
<img src="images/page3_img1.png" >
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:26 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com