Skip navigation
LornaEvil87
LornaEvil87
Currently Being Moderated

Can anybody recommend a flash gallery creator

May 29, 2012 7:10 AM

Tags: #cs4 #photo #image #flash #dreamweaver #images #gallery #creator

I am building a dreamweaver website for someone and I am only a novice. They want a 'carousel' / 'photoflow' gallery that displays their images never ending, that pauses when the mouse hovers over and rotates slowly.

Captions need to be displayed over the photos.Some photos are landscape, others portrait.

 

I must have tried about 30 free trials/free programmes but I am not having much luck, i have literally spent hours trying to do this and I want to cry..

 

I find a reasonable one but its either too expensive or if its free it has a watermark or a link I must put in which I can't have!

 

I'd like a drag and drop type wizard as I don't understand this xml/js business that keeps popping up.

Importantly I need it so that when the 'gallery' is generated it exports as a swf file (with all the images embedded)

 

Can anyone help recommend a programme that fulfills my needs?? Or I am being stupid is assuming I can find something for cheap... I don't mind buying a programme but if i do, i cant afford more than £25-£30 at most.

 

Thanks in advance.

L

1732 Views   12 Replies   Latest reply: astagax, Dec 1, 2012 2:54 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    May 29, 2012 10:11 AM   in reply to LornaEvil87
    Report

    As a web technology for slideshows & galleries, Flash is dead. Don't waste time or money chasing down solutions that won't work in non-flash supporting devices (iPhone, iTouch, iPad, etc...)

     

    There isn't much you can't do with CSS & jQuery -- which has widespread support in all web devices.   However, novice or not, you must have a working knowledge of code  to bring advanced-level features into web sites.  

     

    Below are some possible solutions for you & your client to consider:

     

    http://www.jcoverflip.com/demo

    http://www.jacksasylum.eu/ContentFlow/

    http://addyosmani.com/blog/jqueryuicoverflow/

     

    For something continuous, look at jQuery Cycle or Wow Slider.

     

    http://jquery.malsup.com/cycle/

    http://wowslider.com/best-jquery-slider-crystal-linear-demo.html

     

     

    Best of luck with your project,

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • LornaEvil87
    Currently Being Moderated
    2. LornaEvil87,
    May 29, 2012 6:36 PM   in reply to Nancy O.
    Report

    Thank you, but i am gutted i really didnt realise that flash wasnt supported...grrr, more issues now! Plenty of links many thanks will look asap.

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    3. John Waller,
    May 29, 2012 7:10 PM   in reply to LornaEvil87
    Report

    LornaEvil87 wrote:

     

    Thank you, but i am gutted i really didnt realise that flash wasnt supported...

     

    I personally celebrate the fact that we no longer need to consider Flash as a solution.

     

    It removes yet another web technology that we need to learn and support. Makes life much simpler.

     

    HTML5/CSS3 slideshows and galleries are SEO friendlier, offer most of the same effects as Flash and much easier to maintain. You don't need to go back to Flash (or whatever 3rd party slideshow utility) and the original .fla file to edit and update.

     

    You can even update via a browser or a text editor.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    May 30, 2012 8:06 AM   in reply to John Waller
    Report

    You can even update via a browser or a text editor.

    Or dynamically (php) by uploading new images to a folder on the server. Clients like being able to update their own galleries. 

     

     

    Nancy O.

     
    |
    Mark as:
  • LornaEvil87
    Currently Being Moderated
    5. LornaEvil87,
    Jun 1, 2012 4:34 PM   in reply to Nancy O.
    Report

    Hi

     

    I am using the jackasylum cover flow one after looking at the others, it seemed what I was after. So excellent, thank you!

    Just a quick couple of questions thougt, have you ever used that? I am having trouble, it will display on a Galaxy S2 for eg but won't 'run' on it and also more annoyingly I can't seem to change the size of the 'coverflow' ( i have changed the image sizes but it made the 'coverflow' no bigger and I can't see anything in the CSS.. I just wondered if anyone had any ideas? Bit of a long shot i know but you never know, someone might understand the css a bit better..

     

     

    Here's the css.. (sorry its long)

    .ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-size:100%;font-weight:700;text-align:center;color:#000; max-height:30%;bottom:10%;background:url(img/1x1_0.5_white.png);width: 100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microso ft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_white.png')}.ContentFlow .scrollbar{width:50%;height:16px;background:url(img/scrollbar_white.p ng) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidd en;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:16px;height:16px;background:url(img/slider_black.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoa der(enabled=true, sizingMethod=crop, src='img/slider_black.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:silver;positi on:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#000;font-size :16px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#000;po sition:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(img/loader_white.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{position:relative;overflow:hidde n}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visi bility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin :0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width: 100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#000;font-size:0.8em;font-style:italic;text-decoration: none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}

     

     

    Many thanks.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Jun 2, 2012 11:55 AM   in reply to LornaEvil87
    Report

    Post a link to your page please.   It's much simpler for us to use our browser's developer tools to find the Selector and see the CSS.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • LornaEvil87
    Currently Being Moderated
    7. LornaEvil87,
    Jun 2, 2012 1:16 PM   in reply to Nancy O.
    Report

    Sorry, here is it http://www.thebeautyroomashby.co.uk/bannertest.html

    This is the page i have been doing my tests and messing on.

    I can't seem to make the coverflow gallery any bigger, ideally i would like it almost double. Changing the image size didnt make a difference, least not in I.E and in Firefox it just went wonky. So i am a bit puzzled and everything i seem to have tried doesnt make a bit of difference, i know i am probably missing something silly as usual.

     

    The not working on a galaxy S2 etc.. is beyond me as well but the main concerns the images.

     

    Thank you in advance for any tips.

     

    Regards

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    8. Nancy O.,
    Jun 2, 2012 3:38 PM   in reply to LornaEvil87
    Report

    It's percentage based.  Height and width are 100%.  If you put your contentFlow Gallery into a 100% width page and resize your browser viewport, everything re-scales evenly -- à la responsive web design.  Smaller space = smaller gallery.  Larger space = larger gallery.

     

    Content is scaled by the JavaScript.  Do a search (ctrl+F) for scaleFactor:1  Then change value to 2 and see if that makes your gallery images big enough.

     

    CSS to make the gallery container bigger with pixels is below:

     

    .ContentFlow {

    width: 1000px;

    height: 600px;

    border: 1px solid #CCC;

    }

     

    .scrollbar {

    width: 80%;

    position:absolute;

    top: 35px;

    color:

    }

    .caption {

    color:red;

    padding-top: 35px;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Web Magi
    Currently Being Moderated
    9. Web Magi,
    Jun 2, 2012 9:12 PM   in reply to LornaEvil87
    Report

    You may also want to consider JQuery Tools: http://jquerytools.org/

     

    I've found them to be indispensible and very easy to customize!

     

    Web Magi

    http://www.webmagi.com/

     
    |
    Mark as:
  • LornaEvil87
    Currently Being Moderated
    10. LornaEvil87,
    Jun 3, 2012 2:42 PM   in reply to Nancy O.
    Report

    Thanks Nancy O, that scalefactor worked a treat.

     

    Almost got it displaying how I wanted.. just still have a problem with the iphone.. it works but it bunches up a bit.

    The samsung s2 it doesnt appear to work, i see all the images but can't scroll.

     

    Do you have any ideas for this as I wonder if its something silly.

     

    Also now I have used scalefactor:2 there's not necessarily a gap between all images on the gallery like there was before i think on scalefactor:1, i know its due to some being landscape and some being portrait but is there a set image distance type function I can't see? Not imperative but would be nice if i could sort this out.

     

    Regards & thanks for any feedback anyone can give.

    L

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    11. Nancy O.,
    Jun 3, 2012 3:28 PM   in reply to LornaEvil87
    Report

    I don't know enough about this plugin's code to give you advice on how to "fix it" for mobile devices.  You might try one or two of the optional add-ons to see if they work better.

    http://www.jacksasylum.eu/ContentFlow/addons.php

     

     

    Nancy O.

     
    |
    Mark as:
  • astagax
    Currently Being Moderated
    12. astagax,
    Dec 1, 2012 2:54 PM   in reply to Nancy O.
    Report

    Hi Nancy,

    I was googling around to try and find a solution to my "challenege" and found your helpful reply here.

    I am wondering if you could help me with a "similar" wish with contentflow.

     

    In my case, what I like to do is increase "real estate space" between the images and where the slider is located so that I can put in 6 lines of caption text. Right now if I have more than 3 lines of caption text, it "clashes into and overlay" the slider bar.

     

    I have no idea whereto even look in contentflow.js to do this.

    The js is from   http://www.jacksasylum.eu/ContentFlow/ContentFlow/contentflow.js

    (but when I look at it in my editor, it's in one continuos unending line of code).

    I hope you can shed some light and help me with this.

    Many thanks,

    Tim

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points