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">
>
> <!--- Get all directory information in a query of
queries.--->
> <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
>
>
>
>

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

  • 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

  • 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">
    <!--- Get all directory information in a query of
    queries.--->
    <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">
    >
    > <!--- Get all directory information in a query of
    queries.--->
    > <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
    >

  • Photo gallery with Thumbnail View in Flex 3

    Hello everyone
    I very urgently need an answer to a very simple qeuestoon. I have been trying really hard since days to get a solution to this simple problem but in vain.
    I am building an application in Flex 3. I simply want to create a photo gallery with a thumbnail where when the user clicks on a thumbnail, the image is shown in the canvas/tab navigator box next to it. The images are stored in a local folder (in src) are ARE NOT on available on any web link.
    The Vbox with the thumb image and the .xml file has been created. But when I click on the thumbnail, the full image cannot be seen in the application. I dont know if this is a problem with data binding or what.
    Please help!!!
    Thanks a ton.

    Check the folder structure
    Flash is not able to get some file thats why the IO Error.
    trace the url path just before u load the file and u will be abel to find whether that file is in specified folder or not.
    http://www.darshanrane.com

  • 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.

  • Help with Paged view dataset!

    I'm new to Spry and not really a programmer, but I'm sure
    what I'm trying to do is pretty simple, can anyone help?
    Here's what I'm trying to do:
    - I have created a dataset (dsProjects) which contains 7 rows
    (one of the column values is 'Proj_id')
    - I have created a paged view dataset (pv1) based on
    dsProjects. The page count is 4 - so there are 2 pages I can
    navigate through.
    What I want is when there is a URL parameter (Proj_id), pv1
    will show the correct page containing the row that has the same
    column value for 'Proj_id'
    i.e. when I click on this link
    http://www.ollybaker.com/projects.php?Proj_id=11
    pv1 should display Page 2 of 2 because the row containing the
    Proj_id column value of 11 is on page 2.
    but this doesn't happen... any ideas what I'm doing wrong?
    The code is below:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml"
    xmlns:spry="
    http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/xpath.js"
    type="text/javascript"></script>
    <script src="SpryAssets/SpryData.js"
    type="text/javascript"></script>
    <script src="SpryAssets/SpryURLUtils.js"
    type="text/javascript" ></script>
    <script src="SpryAssets/SpryPagedView.js"
    type="text/javascript"></script>
    <script type="text/javascript">
    var dsProjects = new
    Spry.Data.XMLDataSet("xml/recent_work.php", "export/row");
    dsProjects.setColumnType("Proj_id", "number");
    dsProjects.setColumnType("image", "image");
    //Set up pv variables to display information about the paged
    views
    var pv1 = new Spry.Data.PagedView( dsProjects ,{ pageSize: 4
    var pvInfo = pv1.getPagingInfo();
    var params = Spry.Utils.getLocationParamsAsObject();
    params == 1;
    //Set up pv variables to display information about the paged
    views
    pv1.addObserver({ onPostLoad: function(ds, type) {
    var row = pv1.findRowsWithColumnValues({"Proj_id":
    params.Proj_id}, true);
    // If we have a matching row, make it the current row for the
    data set.
    if (row)
    pv1.goToPageContainingItemNumber(row.ds_RowID);
    </script>
    </head>
    <body>
    <div spry:region="pv1">
    <table cellpadding="10" cellspacing="0">
    <tr>
    <th>Proj_id</th>
    <th>Image</th>
    </tr>
    <tr spry:repeat="pv1">
    <td>{Proj_id}</td>
    <td><img src="images/{image}" width="100"
    height="50"/></td>
    </tr>
    </table>
    </div>
    <p spry:region="pvInfo" spry:repeatchildren="pvInfo">
    <a spry:if="{ds_CurrentRowNumber} != {ds_RowNumber}"
    href="#"
    onclick="pv1.goToPage('{ds_PageNumber}')">{ds_PageFirstItemNumber}-{ds_PageLastItemNumber }</a>
    <span spry:if="{ds_CurrentRowNumber} == {ds_RowNumber}"
    class="currentPage">{ds_PageFirstItemNumber}-{ds_PageLastItemNumber}</span></p>
    <br /><br />
    </body>
    </html>

    You have to make 2 changes:
    - Tell findRowswithColumnValues() to include filtered items
    (items not in the current page) in your search. So change:
    var row = pv1.findRowsWithColumnValues({"Proj_id":
    params.Proj_id}, true);
    to:
    var row = pv1.findRowsWithColumnValues({"Proj_id":
    params.Proj_id}, true, true);
    - Lastly, you are calling the wrong function to show the
    page:
    pv1.goToPageContainingItemNumber(row.ds_RowID);
    It should be:
    pv1.goToPageContainingRowID(row.ds_RowID);
    --== Kin ==--

  • 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

  • Need work around for image gallery with password protected URLs

    Is there a way to display an image gallery that has password protected URLs?
    I can build the image gallery in Siena using an excel table with a list of the images and when I preview the app inside Siena I get the expected credentials prompt from IE, and I enter the credentials and the images load and display with their captions perfectly.
    There are 4-6 images in the gallery.
    When I publish and produce a store app, the app errors out with can’t connect and obviously fails on
        var GenericInitError = "The app could not connect to the server. Please try again later.",
            GenericInitTitle = "Network error";
    Most likely because Siena wants to preload everything and there is no way with preload to enter credentials.
    I am looking for any alternatives that would let me get around this.
    TIA
    -- Barb Bowman

    On Mon, 24 Mar 2014 05:10:01 +0000, Radu Gruian (MSFT) wrote:
    >One possible thing to do would be download and embed the images into your app, eliminating the need for password-based authentication.
    Nope. The app accesses a group of IP Security cameras. Static images would not
    make any sense. And authentication is required. Not negotiable.
    -- Barb Bowman

  • 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 with scrolling thumbnails?

    Hi All,
    I am trying to build an image gallery that will contain 1 big picture and a Horizental strip of thumbnails that will allow scroll trough the thumbnails
    anyone can explain or point out a good tutorial for this?
    Thanx,
    Adi

    Hi Adi,
    do you really ask us for a tutorial, 'cause there are so many nice ready made solutions (with source code, which you could use as a tutorial too), like these:
    http://www.efectorelativo.net/laboratory/noobSlide/ Sample 7
    http://www.electricprism.com/aeron/slideshow/
    http://opiefoto.com/articles/photoslider#example
    http://sandbox.scriptiny.com/javascript-slideshow/
    and so on...
    Hans-Günter

  • 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.

  • 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.

  • How to create Image gallery with mouse move effect

    Hello frndz
                    Please give me any link or flash file which explain how to apply mouse move efect on images of gallery.
    i mean image sof gallery simply move with mosue direction and stop on mouse stop.its very urgent please help me  out
    Thanks and Regards
         Vineet osho

    Try this:
    http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9 b90204-7d00.html

Maybe you are looking for