How would I create a photo gallery like this in Muse?

Just trying to get the same kind of abilities working in muse. Link for site/gallery below
greg noire - photographer

You can try using lightbox widget. Try playing with opacity in normal and rollover states of thumbnails.
Else, you can add another image on rollover state of thumbnail which may be a little darker than the original one.

Similar Messages

How can I create a photo gallery in flash cs3, Iam a beginner in flash

How can I create a photo gallery to put into my current flash site Iam creating? Using flash cs3, can anybody suggest any tutorials (noting complicated with me being new to flash cs3)
When going on line I saw that maybe you can use Dreamweaver, XML, or even Photoshop can anybody explain the difference between using one or the other?
THanks

Indeed, google ftw.
For example:
+as3 photo gallery flash tutorial
reveals many including this one:
http://www.flashmagazine.com/Tutorials/detail/as3_photo_gallery/

Creating a photo gallery like the China Gallery in Adobe Labs. How?

I have photos in several categories (I'll use 2, "frank" and "wolfie" as examples here). What I'd like to do is build a photo gallery like the China Photo Gallery shown in the Adobe Labs site, where the user can switch between categories without going to a different page. Here's what I've done so far and how I'm stuck:
I created a photo gallery with the instructions in the tutorial "Building a photo album with the Spry Framwork". I then inserted a Tabbed Panels widget for navigating between the categories.
I set up an XML file as follows:
/* frank category */
<photo
path = "001p.png"
width = "467"
height = "467"
thumbpath = "001p.png"
thumbwidth = "85"
thumbheight = "85">
</photo>
/* wolfie category */
<photo
path = "001f.png"
width = "467"
height = "467"
thumbpath = "001f.png"
thumbwidth = "85"
thumbheight = "85">
</photo>
To create the div holding the thumbnails for the "frank" category, I entered the following:
<div class="thumbdiv" spry:region="dsGallery"><img src="thumbnails/frank/{@thumbpath}" spry:repeat="dsGallery" spry:setrow="dsGallery" class="thumbs" /></div>
To create the div where the full size images will be displayed, I entered the following:
<div class="mainpic" spry:detailregion="dsGallery"><img src="images/frank/{@path}" onload="MM_effectAppearFade(this, 1500, 0, 100, false)" /></div>
Then, in the tabbed panel set for the "wolfie" category, I did the same thing, substituting "wolfie" for "frank". However, since there is only one xml file, spaceholders for all of the thumbnails appear in the thumbnail div for the frank category. I realize that I'll probably need to create a separate xml file for each category, but how do I set it up so the correct xml file is accessed when the link in the tab is clicked? Or am I approaching this all wrong?
From reviewing the source for the China gallery, it appears that they set up links to different xml files instead of Tabbed Panels. How does that work? There are also some javascript files I can't find anywhere on Adobe's site.
Thanks

Hi,
If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below. dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc. My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
function Albums()
var myalbums = Spry.$$("#albums li", "TabbedPanels1")
var rows = dsAlbums.getData();
var setListener = function( element, value )
Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
for( var i = 0, length = myalbums.length; i < length; i++ )
setListener( myalbums[i], i );
Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
function showAlbum(i)
pauseShow();
pImage = 'No';
var rows = dsAlbums.getData();
var albumid = rows[i]["albumid"];
var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
dsPhotos.setURL(url);
dsPhotos.loadData();
var rowcount = dsAlbums.getRowCount() - 1;
var nextalbum;
var navnext;
var n;
The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
Regards
Phil

Can/How Do I Create a Photo Gallery Template in Bridge

It is possible for me to create a photo web gallery "template" in Bridge CS5. I would like it so that every time I create a photo gallery for sports photos, the header, google analytics, facebook icon, twitter icon copyright and more are all the same every time a create a photo gallery in Bridge CS5.
Sample of one of our photo pages (not done in Bridge yet).

Thanks a million .

Can a photo gallery like this be created in html/CSS?

http://jeffsullivan.smugmug.com/Landscapes/National-Parks/Zion-National-Park-Utah/1946310_ 6PtgP#136213013_XVhBQ
I like the way these galleries expand to browser width - both the thumbs and big image enlarge. I want to learn to make a photo gallery (+ slideshow) perform like this or hire someone with the specific skill set needed to make it for me. I've looked around quite a bit online at photo gallery apps, both free and for sale, including some offered by forum regulars (thanks!), but haven't found one I really liked.
My intent is not to copy this gallery (that would be stealing), just to adopt the expanding images- to browser width feature.
I know Flash could do it but I don't see .swf anywhere in the source... would it be done with Javascript or a combination of apps?

What I didn't mention before is that the photo gallery I want will be only one part of a community-based commercial site under development that needs to integrate with other parts.
That's why I'm asking what sort of developer/skills I'd need to make this happen.
I see. OK, for starters you'll need a firm grasp of XHTML, CSS, JavaScripting, and server-side programming such as PHP and MySql databases.
You also might like to look at an open source Groupware solution such as TikiWiki that has a lot of stuff already built into it.
http://info.tikiwiki.org/tiki-index.php
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

How Would I Make A Photo Look Like A Detailed Painting?

How would I use the "Oil Painting" feature to make a photo look like a detailed painting?

Digital Painting Tutorials with Photoshop
http://psd.tutsplus.com/category/tutorials/painting/
Nancy O.

How do I create & edit a pattern like this in Illustrator?

I want to know how to create and edit a pattern like this in Illustrator:
And then be able to do this:
(same pattern with blue square effect)
Any advice would be appreciated.

Read up on creating patterns. This one is just simple lines and very easy to do, but remember that the defining rectangle MUST be at the very back of the stack:
Start off by making your pattern tile (top). Drag the drawing to the Swatches panel.
Fill a rectangle with the pattern. Scale and rotate the pattern fill (see Scale and Rotate dialogues).
Recolour the pattern using Edit > Edit Colors > Recolor Artwork

Is it possible to create a simple website like this in Muse?

Take a look at this website:
Shaun Weaver - A fullstack developer and digital creative from London, UK aiming to bridge the gap between great code & …
I have designed my website and it works in a very similar way - one pager with full screen graphics. What I like about the example above though, is the ability of the site to detect the size of the web browser window. Each section of the webpage takes up the whole browser window, no matter what size the browser is. Is it possible to recreate this in Muse?
Thanks

You can mimic this type of a design style but not from a functional standpoint. Let me explain. Here's what muse cc or 2014 is missing from functional side of things to allow you to create that type of a site:
First and foremost:
     • Responsive Scaling is not part of the equation in muse, not yet at least. In fact its a top most requested feature that adobe is neglecting to add to muse (their workaround is you can create a seperate phone/tablet design) if you ask me its a shame and labor intensive.
     • Smooth Rollover Animations its easy to hack muse into creating a smooth rollover effect animations its not an actual feature, by hack I mean its 'doable' but its just a pathetic/foolish 'workaround' - see tutorial Adobe Muse CC 7.0 Tutorial | Smooth Fading Rollovers - YouTube
     • No Muse Native animations you have to switch to adobe edge for animations and export files as .oam files and import them back into muse (labor intensive process - if you ask) and your limited with that too.
     • The widgets are not as complex as you want them to be to allow you to create slideshow animations.

How to make a photo gallery like this?

This couple has an impressive portfolio of mtn climbing
accomplishments that will make you want to get out of your chair:
http://www.pfint.com/pics/peaks/RussellWhitneyMuir/RussellWhitneyMuir.htm
I like the way the pics open in new window exactly the size
of the picture with even black border on all sides, and close upon
clicking. Is this an active html page or is each picture page
created separately? (I could do that - don't want to though...)
Would this effect be easy for a intermediate level person to
create? Would like to find a tutorial. Or just the right
script/code to paste in. =0)

That was done with a Dreamweaver extension by Michael Brandt
called
JustSoPic window. I've used it for years. :)
http://valleywebdesigns.com/vwd_jspw3.asp
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"onefiftymph" <[email protected]> wrote in
message
news:gfcndi$k30$[email protected]..
> This couple has an impressive portfolio of mtn climbing
accomplishments
> that
> will make you want to get out of your chair:
>
http://www.pfint.com/pics/peaks/RussellWhitneyMuir/RussellWhitneyMuir.htm
>
> I like the way the pics open in new window exactly the
size of the picture
> with even black border on all sides, and close upon
clicking. Is this an
> active
> html page or is each picture page created separately? (I
could do that -
> don't
> want to though...) Would this effect be easy for a
intermediate level
> person to
> create? Would like to find a tutorial. Or just the right
script/code to
> paste
> in. =0)
>
>
>
>

Easier way to create a photo gallery than this?

Basically, the way in which I'm creating galleries on my sites are a lengthy process.
In DW, I go to Commands > Create photo web album (after creating the three folders to place them in - images, pages, and thumbnails).
Then Fireworks arranges it for me and I make adjustments as necessary in the HTML document.
Once it's done, I go to my hosting service (110mb.com) and I must upload everything - the thumbnails, pages, images - everything. This would be fine if there's only a few photos in the gallery; however, it's quite a problem when the website contains six galleries, each with around 30 photos.
Can anyone give me any advice on how to make this less time consuming?
p.s. I do not want to use a free photo storage - the gallery must not link to an external website.
Thanks in advance.

is there a way to remove the background when embedding the website? This seems like a really simple solution to my problem, but unless I can remove the background colour, JAlbum links and all other unnecessary elements of the embedded webpage, it looks really inconsistent.
To change the background or other elements in your JAlbum gallery, either select a different skin (style) or customize your skin Template (.htt) files.
http://jalbum.net/developer
JAlbum has a discussion forum where you can get help. Use the appropriate group for your skin - http://jalbum.net/forum/index.jspa
Finally, you might find it easiest to bring your Gallery index page into your existing site using an inline frame or <iframe>. You can see an example of this on my web site. View Page Source in browser to see how it's done. http://alt-web.com/gallery.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Can i create a popup menu like this in muse?

I am having trouble with this...please someone get me out of this...
Thanks..!!

You can try using lightbox widget. Try playing with opacity in normal and rollover states of thumbnails.
Else, you can add another image on rollover state of thumbnail which may be a little darker than the original one.

Creating a photo gallery using behaviors?

I am re-designing a website, and I'm a little stuck on how to re-create the photo gallery presentation of the original web site. Here is the original gallery:
http://www.sarahegeller.com/photos
What I'd specifically like to reproduce is the ability to click on a thumbnail, which would bring up the larger image, but with the original window remaining behind, greyed out. I assume this is something I can do with behaviors, but there doesn't seem to be a behavior that addresses this, at least among the behaviors dreamweaver CS 3 comes with. I assume a behavior that would give me the effect I want exists on the dreamweaver exchange, but I couldn't find one. Am I even correct in assuming I could achieve the effect I'm looking for using a behavior?
I'm using dreamweaver CS 3, on a mac.
Thanks for taking the time to read this query.
Yours,
Nick

The effect you're aiming for is a currently popular one known as a Lightbox.
There is no in built Dreamweaver behaviour for this. You'll need to look for 3rd party solutions such as jQuery.
From the page code:
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/auto_image_handling.js"></script>
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/lightbox.js"></script>
The effect on that particular site is created with a Drupal module: Lightbox2
http://drupal.org/project/lightbox2
You may be able to use:
http://www.lokeshdhakar.com/projects/lightbox2/

Help to create a photo gallery..

Can anyone visit this site..
www.ted.com
I want to create a photo gallery like that.. I mean when i hover my mouse over a thumbnail my image should enlarge.. and if i click i should be able to download..
I want that animation while loading between my galleries..
please help me.. please.. no need that various sizes for all tiles.. no problem even if all tiles are of same size.. please.. I need it so badly..
thanks in advance

Whenever I need a gallery like this i usually just buy one
from:
http://www.flashcomponents.net/component/
they are usually like $8-10 and have saved me quite a bit of
time... there are plenty of tutorials out there for custom ones,
but for $8 its hard to pass up a pre-built... i know this doesnt
answer your question exactly but i figured i would give my 2 cents,
hope this helps :)

CS6 How to create a photo gallery?

CS6 How to create a photo Gallery?

I like Fancybox2. It's a big improvement over Lightbox & the original Fancybox.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles image container**/
#thumbs p {
    float: left;
    width: 180px;
    height: 12.5em;
    margin: 10px 0 0 20px;
    padding: 10px;
    border: 1px solid silver;
    /**rounded borders**/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    /**this styles caption text**/
    font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
    color: #666;
    text-align: center;
/**recommend using same size images**/
#thumbs img {
    width: 160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    margin-bottom: 1.5em;
    opacity: 0.75;
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
    content: ".";
    clear: left;
    font-size: 0px;
    line-height: 0;
    display: block;
    visibility: hidden;
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>

<div id="thumbs"> <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
Caption 1 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
Caption 2 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
Caption 3 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
Caption 4 </p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
Caption 5 </p>
</div>

<h1>Fancybox with Iframe</h1>
<h3><a class="fancybox" data-fancybox-type="iframe" href="http://example.com">EXAMPLE.COM</a></h3>

<script>
$(document).ready(function() {
    $('.fancybox, iframe').fancybox();
</script>
</body>
</html>
Nancy O.

How do you embed a photo gallery created in adobe bridge to a webpage?

HI,
Help would be appreciated, i have created a photo gallery using adobe bridge but i am struggling in finding a way to embed the gallery to a webpage. I do not dreamweaver. Can anybody help?
Many thanks

It is a little more difficult to do this without DW or a similar app. but it can be done using regular html code and creating Links on your Home/index page to your Galleries.
Each complete Gallery folder needs to be uploaded into your Site folder on the Server which hosts your web site and you create separate links on your Home page to each of them.

How would I create a photo gallery like this in Muse?

Similar Messages

Maybe you are looking for