Overlay: image gallery with swipe and page control

Hi,
I'm in my first approach with DPS and I can't understand how to create an image gallery swipe controlled with the page control on the bottom part (page control is rapresented by those little circles on the bottom part of the image that shows how many images are shown by the gallery. See this image for a page control example: http://gtiapps.com/wp-content/gallery/p681_gallery/page1.png ).
I tried to read the documentation and the DPS tips but I can't see this simple kind of gallery.
I'm sure I already saw this kind of gallery in DPS-like apps like Wired, I can't believe is some kind of html based gallery (and if it is, anybody could link me a page where I can get the code snippet for that?).
I'm using inDesign CS6 on OsX.
Please give me some suggestions to get this interaction,
thank you in advance,
Bye!

It's definitely HTML. Here is a list of a whole bunch of them...
http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I'm a big fan of roundabout at fredhq.com
You can also make something similar using buttons, and an MSO, not quite the same, but if you don't want to delve into HTML, it will do the job. The dots on the bottom can be buttons. I don't have a machine handy to try and see if you can make the MSO swipe blue, but it is worth a try.
A note about using HTML in a folio. Make sure you have the HTML in its own folder, with all the assets needed, but nothing else. Anything else in that folder will also be included in the folio. (I.e. if you just put the HTML in the folder with your indesign doc, when you included the web overlay, the indesign doc, would also be uploaded. Clear folder organization is key for dps projects.

Similar Messages

Spry image gallery with filmstrip - how to display all thumbnails?

Hello,
I'm using the Spry image gallery with filmstrip and want to be able to show all thumbnails. So instead of scrolling across to see all the thumbnails I would like to display them in a couple of rows. I thought it would be a case of changing the css from overflow: hidden to overflow: visible and increasing the height but this didn't make a difference.
An example of my gallery is here http://www.demo.femmewebsites.com/gallery.html (This site doesn't have many thumbnails but I have others with 20+ images that need to be displayed)
Your help would be much appreciated.
Thanks

Hello Krista,
did you have a look here: http://labs.adobe.com/technologies/spry/demos/pe_gallery.html, where you will find DW "Photo Gallery Demos". In every demo, are arranged a large number of images in several rows and rows. Therefrom you can use their source codes.
Hans-Günter

Create a full-screen image gallery with MSO - breaks other buttons?

Hi - I'm trying to create a full screen image gallery to be accessible from any layout via a button. The ultimate goal is to use my layout as a presentation tool and allow the presenter to have an 'image gallery' button on each page,so they would be able to jump to a full screen image at any time. Most of my layouts have other buttons, scrollable content, etc. I thought I had a great idea: create a multi-state object with the first state being blank, and each subsequent state would have an image and also a full screen black box at 50% transparency. The problem is, now my other buttons are no longer working. I confirmed that the existing buttons will work if they are arranged to be in front of the image gallery MSO, but that's not a good solution. Am I missing something or is there another workaround? Thanks!
John

You have to put buttons inside each state of the MSO.
It's not really a workable design in the long run, you should probably rethink it It's also not good from an app performance standpoint as it requires loading full-screen images for each state into memory.
Neil

Image gallery to autoplay and highlight the thumbnails

Hi all,
I still haven't been able to find anything suitable for an
image gallery with thumbnails that:
- autoplays
- highlights the thumbnails and displays the main image at
the same time
- and when the mouse is over the thumbnail, the thumbnail
highlights or has a border around to show that it's been selected.
Here is a sample of what I'm looking for:
http://components.earthscienceagency...nts/slideshow/
Of course the captions need to be loaded as well as a
previous and next button to scroll through the images.
Any help with this would be greatly appreciated.
Thanks

Hi all,
I was able to resolve some of my issues, but still have a
couple more. The images from my xml appear out of order (so the
last one inserted in the xml appears first) and also I'd like the
thumbnails to be highlighted as the main image transitions in and
out. I have the main image autoplaying and the thumbnails are
pretty much static.
I've provided the AS below. For the thumbnails, would it be
possible to create a similar to the slideshow function and have the
thumbnails play at the same time too?
Any help would be greatly appreciated!

Problem with Frameset and page session

All,
I am having a problem with Framesets and page session attributes. I
have a client who's application uses a three frame frameset. They
have a requirement on several pages that when a button is pushed two
different pages load into the right and left frames. The way they
are accomplishing this is that on the pages were this is required,
they are adding target="_top" to the form declaration in their JSP.
Then they store the page names they want to display in session,
forward the request to the frameset, the frameset then determines
which pages to display based on the session variables. This works
exactly how they want it to.
Here is our problem. We need to store some information in page
session attributes. We have tried to get a handle to the desired
view bean and call the setPageSessionAttribute method. However,
since we are forwarding to the frame and the frame handles displaying
the desired JSP, that view bean we had the handle to is not the one
that is created to hand the display of the JSP.
The next thing I tried was to use the request object. In the
handleBtnRequest method, I set an attribute in the request object. I
then query the request object in the beginDisplay event of the view
bean. When the frame is reset the request object does not contain
the attribute that I have set. I'm confused by this because I
thought the request object would be available to me throughout the
life of the request.
Given the above information, does anyone have any suggestions? Also,
am I going about this in the wrong manner.
The client had been storing this information in user session, which
seemed to work. However, since the data being stored dealt
specifically with data for the requested page, we felt that storing
it as page session was more appropriate.
Thanks,

The script on your page web page has some obvious bugs.. Best
fix those
first before looking to blame Flash.
Jeckyl

Does mac book pro come with keynote and pages or doi have to purchase them seperately; can i purchase online?

oes mac book pro come with keynote and pages or doi have to purchase them seperately; can I purchase online? My son has an assignment due tomooorow they use macs at school and we assumed he could just finish it at home and..no Keynote!

Mac don't come with iWork installed unless you configure it while buying your Mac online.
However, iWork can be purchased at the App Store. You can buy the apps individualy (Pages, Numbers and Keynote) too.

Embed pdf in website, show one page at a time, with forward and back controls?

Hi,
Not sure if this is possible (or if this is the right place to ask), but I need to take a multiple page pdf, embed it in a website so its on the left half of the screen, have it only show one page at a time, and have the forward and back page controls.
Is this possible, and if so, could someone point me in the right direction?

Typically you would save it to a JPeg and post those on the web site. Expecting a PDF to show up depends on the client computer configuration and browser. This is too risky, unless you don't mind getting nasty little notes that it does not work. If you do it with JPegs, then all the browsers I know of can handle it. Then simply put the PDF separately for those who prefer to download the PDF and look at it separately.

I want to create an image gallery with forward back nav, master image with a click to pop out zoom

Hi Musers,
I'm currently building a photography website and need some help building a specific type of gallery.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Below is a description of the gallery I want to build:
On the gallery page the gallery appears as a single 'Master Image' with forward and back 'Navs.' and a 'Counter' underneath this single 'Master Image'. Lets say that there are 10 images in this gallery. When the viewer clicks on the forward 'Nav.' the 'Master Image' changes to the next image in the sequence of 10 and the 'Counter' below confirms this progression, in this example the 'Counter' changes from 1 of 10 to read 2 of 10, the 'Master Image' displayed is the second image in the sequence.
Simple so far.. This above I can do as this is just a basic gallery. What follows is what I cannot find a solution for.
I want the gallery viewer to be able to click on the 'Master Image' and launch an enlargement of that image overlaying the gallery page, very much like the way the 'Lightbox' widget displays an enlarged image. When the viewer clicks off the 'Ligtbox' or enlarged image it dissapears, reverting the page view back to the standard gallery view with 'Master Image', 'Navs.' and 'Counter'. I do not want the expanded / Enlarged 'Lightbox' image accompanied by a thumbnail gallery, 'Navs.' / Navigation arrows or a 'Counter'. What I want is to be able to launch an enlarged version of the 'Master Image' as an overlay on the gallery page, something like a pop out.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Can anyone explain how I can do this? Is it possible?
The solution I want seems to be a highbrid between the standard gallery with navigation arrows kept but minus thumbnails and captions with some of the functionality of the lightbox gallery widget.
I very much appreciate any help anyone can give.
Thank you

Hi Harriet,
Thanks for the message. I'm sure as time goes on new features will be introduced but it's a bit of a shame that the widget library is a little basic, oh, and at times it's just that little bit buggy. So far I'm really impressed by Muse despite being ever so slightly disappointed by some of it's limitations. I'd like to see more image gallery options, the ability to set up a client login area or a client ftp within a site, I also tried embedding video but as I'm no programmer the result looked clumsy so some focus on this would be a help. Considering that a good number of people benefiting from a Muse site will be online retailers a zoom function should have been there from the start.
Best regards
Jacques

PHP Image Gallery with Images placed every other paragraph

Currently I have multiple images that where uploaded to the details page of Post 1. Every other paragraph I have an image displayed. With say 5 images.
What I would like is that the user can click on the image and open up a gallery (on the same page, like Lightbox Gallery) and view through the other 4 images related to Post 1, as these images may not be full resolution on the details page.
If I understand correctly, Lightbox makes a small thumbnail preview of the images, which I don't want, and lists them like a Gallery (Next to each other). Can anyone direct me on the best way to accomplish this?
Thanks,
Riley

Sorry for the confusion, I didn't mean lightbox actually created the thumbnails, but it produces them similar to the link you provided which I don't want. My image uploader does create thumbnail images, but only one per new post.
My format is similar to this:
POST 1
Text Paragraph1 (Image1 )
Text Paragraph1 (               )
Text Paragraph1 (               )
Text Paragraph1 (               )
(Image2) Text Paragraph2
(               ) Text Paragraph2
(               ) Text Paragraph2
(               ) Text Paragraph2
Now what I would like is that they can click on the picture and it opens up the image at say 600px X 600px resolution, with the next/prev buttons so they can browse through only the picutres on this page.
I have been trying to find an example but seems that some take you to a different page of just the image you clicked on, or a new page with the gallery.
I like how the lightbox gallery opens up on the same page, that way you close out of it and can continue reading. But I want to be able to have the images placed in different positions on the page, and not in a row like with a Gallery.
I hope I help clarified what I am trying to do.

Image gallery with CSS menu

I have a image gallery (slideshow) created with Flash and
XML. My website uses a css/javasript dropdown menu for navigation.
The dropdown menu is hiding behind the slideshow no matter what I
set it's z-index to. Is there something in flash that lets me set
its z-index? I could jsut drop the menu off of the page and give a
return link but that is a workaround and I would much rather stay
consistent with my site. Any help that could be given would be
appreciated.
Mark V.

"mvanneman" <[email protected]> a écrit
dans le message de news:
f9ssu4$346$[email protected]..
>I have a image gallery (slideshow) created with Flash and
XML. My website
>uses
> a css/javasript dropdown menu for navigation. The
dropdown menu is hiding
> behind the slideshow no matter what I set it's z-index
to. Is there
> something
> in flash that lets me set its z-index? I could jsut drop
the menu off of
> the
> page and give a return link but that is a workaround and
I would much
> rather
> stay consistent with my site. Any help that could be
given would be
> appreciated.
try to embed your movie with wmode="transparent"
lea

Image Gallery with cfdirectory with no DB

Hi
Im trying to get an image Gallery going with cfdirectory with
no Database amd pagination through Cfdirectory
Im current using cfdirectory to create a query and
cfx_openimage to create thumbnails.
the issue I have and where Ive been stuck is when a user
clicks on a thumbnail, how do i get pagination going the next page
between the photos
here is my code
<cfdirectory
directory="#GetDirectoryFromPath(GetTemplatePath())#/#url.username#/images/#url.date#/"
name="dirQuery"
filter="*.jpg. *.jpeg"
sort="name ASC, size DESC">

<cfquery dbtype="query" name="GetBoth">
SELECT * FROM dirQuery
</cfquery>
<cfoutput>
<cfloop query="GetBoth">
<a
href="/outandabout/#url.username#/images/#url.date#/#getboth.name#"><img
src="/outandabout/#url.username#/images/#url.date#/thumbs/_#getboth.name#"></a><br>
</cfloop>
</cfoutput>
Thanking you advance

Your code links directly to the image not a page displaying
the image. If
you are wanting pagination you will need to use page to
display the full
size image and the paging links.
Bryan Ashcraft (remove brain to reply)
Web Application Developer
Wright Medical Technology, Inc.
Macromedia Certified Dreamweaver Developer
Adobe Community Expert (DW) ::
http://www.adobe.com/communities/experts/
"stevegio" <[email protected]> wrote in
message
news:f58unu$j5$[email protected]..
> Hi
> Im trying to get an image Gallery going with cfdirectory
with no Database
> amd
> pagination through Cfdirectory
>
> Im current using cfdirectory to create a query and
cfx_openimage to
> create
> thumbnails.
>
> the issue I have and where Ive been stuck is when a user
clicks on a
> thumbnail, how do i get pagination going the next page
between the photos
>
> here is my code
>
>
> <cfdirectory
>
>
directory="#GetDirectoryFromPath(GetTemplatePath())#/#url.username#/images/#url.
> date#/"
> name="dirQuery"
> filter="*.jpg. *.jpeg"
> sort="name ASC, size DESC">
>
> 
> <cfquery dbtype="query" name="GetBoth">
> SELECT * FROM dirQuery
> </cfquery>
>
> <cfoutput>
>
> <cfloop query="GetBoth">
>
> <a
>
href="/outandabout/#url.username#/images/#url.date#/#getboth.name#"><img
>
src="/outandabout/#url.username#/images/#url.date#/thumbs/_#getboth.name#"></a><
> br>
> </cfloop>
>
> </cfoutput>
>
>
> Thanking you advance
>
>
>
>

Create an image scroller with swipe&drag in Edge Animate

Hi folks!
I'm trying to create a image scroller like this one http://www.awwwards.com/demo/touchSwipe-gallery-demo.html.
For the Swipe, I use the wonderful JQuery Plugin TouchSwipe http://labs.rampinteractive.co.uk/touchSwipe/demos/, but for the image sliding I would use the Adobe Edge Animate Timeline.
I know that I can use the Swipe events in Edge Animate to make start or reverse the timeline with pictures, but I would also make working an intermediate "dragging".
My problem, in fact, is: how can I make that - if I've only begun to swipe and I move the finger to left or right without releasing it - my timeline "drag" (or scrubs) frame by frame - like in the example above - until I release the finger?
Many thanks in advance!
Davide

Hi Elaine!
First, thanks for your prompt answer!
I read the link you gave me: in fact, I was aware - also thanks to Old Tim's posts - about how to create a "scrubber" in Edge Animate, starting from formulas like:
Translation = (positionOfScrubber/WidthOfScrubbing)*timeline;
My problem now is - I fear - more subtle: I can swipe left-right a set of pictures, I can "scrub" a timeline (using for example JqueryUI for the dragging), but I don't know how to put together the swiping and the dragging.
I would that - like in the example from my first post - if, e.g., I completed the swipe left, my timeline would play the animation that shows the pic moving to the left but, if I didn't complete the swiping and I begun dragging to the left, the animation would move with my dragging-finger (the "scrubbing")...
I know is very subtle, but it's how the gallery scrollers works on web and app in mobile devices...
Many thanks for your attention!
Davide

Image Gallery with Paged View

Hello
I'm developing an application with an ASP backend, to allow
users to input photos and have them immediately display in a
gallery. It all works fine except I can't figure out how to make
the slide show loop only within the current page.
There's an example
test
gallery here in which I've turned off autoslideshow on load -
but if you click the 'Play' button, it traverses the entire
dataset.
Any advice or thoughts would be appreciated.

Your code links directly to the image not a page displaying
the image. If
you are wanting pagination you will need to use page to
display the full
size image and the paging links.
Bryan Ashcraft (remove brain to reply)
Web Application Developer
Wright Medical Technology, Inc.
Macromedia Certified Dreamweaver Developer
Adobe Community Expert (DW) ::
http://www.adobe.com/communities/experts/
"stevegio" <[email protected]> wrote in
message
news:f58unu$j5$[email protected]..
> Hi
> Im trying to get an image Gallery going with cfdirectory
with no Database
> amd
> pagination through Cfdirectory
>
> Im current using cfdirectory to create a query and
cfx_openimage to
> create
> thumbnails.
>
> the issue I have and where Ive been stuck is when a user
clicks on a
> thumbnail, how do i get pagination going the next page
between the photos
>
> here is my code
>
>
> <cfdirectory
>
>
directory="#GetDirectoryFromPath(GetTemplatePath())#/#url.username#/images/#url.
> date#/"
> name="dirQuery"
> filter="*.jpg. *.jpeg"
> sort="name ASC, size DESC">
>
> 
> <cfquery dbtype="query" name="GetBoth">
> SELECT * FROM dirQuery
> </cfquery>
>
> <cfoutput>
>
> <cfloop query="GetBoth">
>
> <a
>
href="/outandabout/#url.username#/images/#url.date#/#getboth.name#"><img
>
src="/outandabout/#url.username#/images/#url.date#/thumbs/_#getboth.name#"></a><
> br>
> </cfloop>
>
> </cfoutput>
>
>
> Thanking you advance
>
>
>
>

Is there a way to create a CSS image gallery with caption?

Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C

> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
>

How can I create an image gallery with "next" buttons?

So I am almost done with my portfolio site (YES!)..now I just need the actual content (the images). My site is written in AS3.
I've watched many tutorials on how to create an image gallery (auto scrolling ones, scrolling ones that require mouse hover, etc etc), but those aren't what I am looking for.
I want a gallery that looks exactly like this one here:
http://jalbum.net/res/help/integrating-tutorial.html
I have a lot of work to display in my porfolio so there must be arrows at the end of the thumbnails so I can add more stuff. So I am just stumped on how to make the image gallery work with the ability to scroll for more photos with the click of the arrows.
Any ideas? Thank you.

Watching tutorials and learning from them are two different things. If you have learned from them you should be able to use what you have learned to devise a gallery such as the one you link to. If you have learned from them and cannot use what you learned, then you probably need to find/learn more.
If you study the design you linked you should be able to reason out what elements you need to devise... it is not overly complicated.
For the large picture you could have a Loader into which you load whatever image is selected from the thumnails. To get a brief transition you could just set the alpha of the Loader to 0 when an image change is occuring and gradually fade it in after the image has loaded.
The greatest challenge you are likely to face is in getting the thumbnails to advance back and forth depending on which is selected. All of the thumbs would be placed in a container (movieclip or sprite) and that would be masked so that only a portion of them is visible.
All thumbs that are not selected have their alpha property set to some value less than 1. Selecting one calls for the file it associates with to be loaded into the Loader. If the choice happens to lie off screen, then you need to move the movieclip that contains all of the thumbs some set value in the right (+x) or left (-x) direction.
If you want the thumbnails to wrap infinitely then when one leave the thumbnails area for movement in a direction, you need to take that thumb and relocate it to the other end of the thumbs in the container.

Overlay: image gallery with swipe and page control

Similar Messages

Maybe you are looking for