Simple html5 image gallery

Hi,
Can anyone point me in the direction of a very simple (need to give this as a tutorial) but effective image gallery which can be added into a html5 website?
Thanks

jQuery Cycle2 is a responsive slideshow plugin that works well in HTML5 doc types.
http://www.malsup.com/jquery/cycle2/
However if what you really want is an HTML5 gallery using <canvas>, then look at the tutorial below:
http://pehaa.com/2012/02/create-your-portfolio-gallery-using-html5-canvas-tutorial/
Nancy O.

Similar Messages

Simple disjointed image gallery

I originally created this simple one page gallery in GoLive. What's the best way to duplicate it in Dreamweaver (CS5)? Issues: on clicking thumbs, images with different dimensions load to placeholder without distorting, thumbs become gray when "visited".
http://www.sonsmi.com/paintings3.html

Success! Up and running and easy to maintain. Easier than I imagined -- no javascript coding necessary with the Behaviors panel.
http://www.sonsmi.com/paintings5.html
Here's the process I used for those who might be interested:
Preparation: button state images. I used Photoshop to create each button image -- for example, "button01.jpg" and "button01_click.jpg".
Make a placeholder image: "placeholder.jpg".
Prep all gallery images to be the right size. (in this case I made max width/height no greater than 500px).
Now to Dreamweaver: use Insert Placeholder to place image. By default, Swap Image uses the placeholder dimensions and distorts swapped images to fit if they don't match. As Murray suggested, I went to code view and deleted the placeholder width and height values so I could use images of various sizes.
Insert button image into page (e.g., drag from library).
Making sure button image is selected on the page. In the Properties panel, give each button an ID.
Select a button on the page. In the "Behaviors" panel, select Swap Image.
In the Swap Image panel, with the button ID selected, browse to select the image to show when the button is "visited" (for ex., "button01_click.jpg").
While still in the Swap Image panel, select "placeholder" and browse for the image to swap when the button is selected.
Uncheck "Restore images onMouseOut". Otherwise, the image will disappear when the mouse moves away from the button.
In Behaviors, where it shows "onMouseOver", change it to "onMouseDown" from pulldown (click the little menu arrow next to it).
For text captions, I created a new div tag for the caption area and added another behavior for each button: "Set Text of Container". (I also added a new css rule in my style sheet called "#caption").
Thanks again, Murray. You really helped me.

How to make a simple online image gallery?

Hello,
I'm wanting to make a webpage that showcases some images, very much like this one http://www.mapltd.com/artist/janinetrott/illustration/1/
I want button where you can click to the next image, and have only the next image load, not the whole page like the link above....
Is this done in flash, or maybe dreamweaver? What should I be seraching for when looking for a tutorial for this?
Any help would be greatly appreciated
Thanks !!
Lucy

One of my favorite full featured Flash galleries is SlideShowPro. It comes with an amazing back end, elegant design and best practices coding. You can try it and if you like it the price is dirt cheap ($39) compared to sitting for hours trying to code your own. Time is money..
http://slideshowpro.net/
I would highly recommend getting Director as well. That makes something that sounds tedious like adding all your photos actually fun.

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

I need to create an image gallery

I'm looking for a tutorial which explains me how to create a simple AS3 image gallery driven by an XML file.
The gallery I need is really simple:
- an horizontal bar placed on the bottom containing the thumbnails which scrolls left and right according to the mouse pointer
- clicking on a thumbnail the full image must be shown above the thumbnails' bar
- buttons for prev and next image
- clicking on the button which opens the gallery I must be able to pass a variable to make the gallery load the proper xml file (I've got 6 different categories to show)
That's all I need.
Do you know where I could find a tutorial?

I'm trying to do it by myself.
I've decided to give to the xml file this structure
<imgList>
<img thumb='img_001_thumb.jpg' full='img_001_full.jpg' desc='image 001' />
<img thumb='img_002_thumb.jpg' full='img_002_full.jpg' desc='image 002' />
</imgList>
I've found some tutorials where they read the attributes in this way
xml.img@thumb
xml.img@full
xml.img@desc
where xml is an xml variable containing the xml file's data.
I think that syntax is for AS2, while I'm using AS3 and it say to me that a semicolon is expected before atsign.
How can I read the attributes thumb, full and desc in AS3?

HELP! - XML Image gallery, simple problem

I've posted this problem before and gotten no response. Very
simple I'm sure, I just don't know much Flash. Basically I've
created an image gallery that should look like this:
http://www.flashcomponents.net/upload/samples/1448/index.html.
The problem is that the thumbnails are not being accessed properly
(from what I can tell), making it look like this:
http://shortydesigns.com/index.html.
The images are all in the same folder and since one thumbnail is
loading, I can't see why the others aren't. The Actionscript in the
Flash file is as follows (it was created with Flash 10):
First Piece of Code
stop();
// specify the url where folder is located below (if
applicable)
toadd = "";
t = 0;
l = 0;
theside = 1;
galxml = new XML();
galxml.load(toadd+"flash/fashion/easy-xml-gallery-2.xml");
galxml.ignoreWhite = true;
galxml.onLoad = function(success) {
if (success) {
maxnum = galxml.firstChild.childNodes.length;
for (n=0; n<maxnum; n++) {
specs = galxml.firstChild.childNodes[n];
// TEXT FOR SIDE NAV
duplicateMovieClip(side.thumbs.thumbsb, "thumbs"+n, n);
thumbclip = eval("side.thumbs.thumbs"+n);
thumbclip._x = n*100;
thumbclip.thetitle = specs.attributes.name;
thumbclip.theurl = specs.attributes.theurl;
thumbclip.thecaption = specs.attributes.caption;
thumbclip.thenum = n+1;
thumbclip._alpha = 100;
loadMovie(toadd+"flash/fashion/images/"+(n+1)+"b.jpg",
thumbclip.thumbload.thumbload2);
play();
side.thumbs.thumbsb._visible = false;
mainperc.onEnterFrame = function() {
if (mainperc.perc<98) {
mainperc._alpha += 5;
mainperc.perc = Math.round(l/t*100);
mainperc.perctext = mainperc.perc+"%";
mainperc.ltext = "OF THUMBNAILS LOADED
("+Math.round(t/1024)+"kb)";
if (mainperc.perc>98) {
// mainperc._alpha -= 5;
if (mainperc._alpha<-50) {
delete mainperc.onEnterFrame;
Later in the timeline:
stop();
pic.info.thenum = side.thumbs.thumbs0.thenum;
pic.info.thecaption = side.thumbs.thumbs0.thecaption;
pic.info.thetitle = side.thumbs.thumbs0.thetitle;
pic.info.theurl = side.thumbs.thumbs0.theurl;
loadMovie(_root.toadd+"flash/fashion/images/1.jpg",
pic.pic2.pic3);
onEnterFrame = function () { side.gotoa = 110;if
(side._alpha>99) {side._alpha = 100;delete
onEnterFrame;}side.lefta = side.gotoa-side._alpha;side._alpha +=
side.lefta/5;pic._alpha = side._alpha;};

I noticed two thing:
1. I guess the error occurs when currentImage variable is out
of range of sortedXML array. You, perhaps need to trace this var
and see at what point the error happens.
2. Unless I missed someting, It seems that you always load
images. At some point you load images that are already loaded. It
is inefficient. You, perhaps, better off reusing already loaded
images.

Flash simple image gallery problem

Hello I have what I think is an easy problem to solve but I
can´t find a solution.
I´m creating an image gallery with thumbnails on the
right inside a symbol so that
they can all fade in at the same time, and the bigger images
on the left that also fade in.
I can only fit 8 thumbnail images at a time, and want to have
more than that.
So I´ll add an arrow below the thumbs so that when you
click on it, you can see the other thumbs.
I have the first 8 thumbs on the first frame of a symbol and
the rest on the second frame.
My problem is that the symbol that contains the thumbs is a
graphic symbol, so that the thumbs in it, that are button symbols
can be clicked on. I tried using button and movie clip symbols for
the thumbnails container but then the buttons (thumbs) can´t
be clicked any more.
That was not a problem till I had to add more than 8 thumbs,
cause i need to give the container an instance name, and graphic
symbols can´t have one.
Here is the link to download the .fla
www.ginkgo.com.uy/old/downloads/handheld_pink.fla
In case I didn´t make my self clear, what I need is to
know if there´s a way to have a movie clip or button symbol
that can have buttons in it that can be clicked on.
I hope I didn´t give you a headache.
Thanks a lot, Marcelo.

thanks.
that´s what i thought but, if i convert the container to
a button symbol the thumbs can´t be clicked anymore.
And if I convert the container to a movie clip like you
suggested, then if I click on any part of the container it
just goes to the second frame of the movie clip container, if
i click again it goes back to the first frame and so on.
But there is no action script for the container at all,
please try it out with the fla i uploaded.
i can´t figure it out.
thanks

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

Need advice/idea about Image gallery

Hello to ALL!!!
I'm trying to make an dynamic image gallery WITH!!! some
active buttons above (for example: BUTTON1 with function "delete"
and BUTTON2 with function "update") a picture and some "dataoutput"
below (for example:Price). So, separate cell must look like:
BUTTON1 BUTTON2
<Image>
PRICE
For implementation this task I have:
1) mySQL database "gallery" with table "test" and columns
"Id", "path to image", "Price"
2) 2 gifs: BUTTON1, BUTTON2
Before my first trying I thought that it's simple, and I've
tried:

<cfquery name="qTest" datasource="gallery">
SELECT * FROM test
</cfquery>
<div id=imagecont>
<cfoutput>
<cfloop query="qTest">
<img src="../Button1.gif />
<img src="../Button2.gif /><br>
<img src="#qTest.path to image#" />
<p>#qTest.Price#</p>
</cfloop>
</cfoutput>
</div>
And it worked normal. BUT!!! Looping had a vertical
direction! And any CSS rules that I've applied to DIV "imagecont"
(weight, height) hadn't any effect.
So, what I've get:
I see all necessary information (on browser), but I don't
know, how to format it with my dreaweawer cs3 and CSS.
And I afraid that I've chosen a "wrong method" (I mean my
code above)
Please, give me some recommendations or advices.
How can i archive my needs?
How to use CSS in div tag, which includes <cfloop>
code. I've also tried to use CSS with structure like:
<div id=a>
<cfoutput>
<cfloop >
<div id=b>
DATA
</div>
</cfloop>
</cfoutput>
</div>
But (div a)'s CSS rule HEIGHT take's no effect on <div
id=b> :(
And what about useful technique for displaying " action
buttons" above each image in dynamic image gallery???
Great THANKS for your answers/comments!!!!

the css attribute you are looking for is FLOAT.
see if something like
http://www.photos-of-laos.org/top-rated.cfm
is
what you are after in general images layout terms. feel free
to check
the generated html :).
re general css knowledge i highly recommend the book
"Bulletproof CSS"
by Mark Grabinski.
re the 2 buttons above the image: consider turning them into
css image
overlays instead (when the buttons appear OVER [not above]
the image
only when a user mouses over) - it looks much better that
way.
hth
Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

Help with scrolling image gallery?

Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Marc Moss Art</title>



<link href="style.css" rel="stylesheet" type="text/css">
<link href="../../../../style.css" rel="stylesheet" type="text/css">

</head>
<body topmargin="600">
<div id="wrapper">
<div class="container">
<header></header>
<div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
</div>
    
    <div class="photobanner">
        <img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
        <img src="../../../../mosspictures/DSCN0040.JPG" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
        <img src="image-5.jpg" alt="">
        <img src="image-6.jpg" alt="">
        <img src="image-1.jpg" alt="">
        <img src="image-2.jpg" alt="">
        <img src="image-3.jpg" alt="">
        <img src="image-4.jpg" alt="">
    </div>
    <nav>
    <div id="navigation">
    <ul>
    <li><a href="#">bio</a></li>
    <li><a href= "#">inspiration</a></li>
    </ul>
    </div>
    </nav>
</article>
<footer>
</footer>
</div>
</div>
</body>
</html>

Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
   <img src="mosspictures/DSCN0040.JPG" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O.

What happened to "Simple Web Photo Gallery" Automation in Photoshop

Hi - I have used Photoshop's automation tool to make a simple web photo gallery for at least 10 years. I have built a business out of displaying photos that way for clients. i do a few things in the HTML but mostly that function of putting them all in a gallery in nice simple columns was of major use. 1000s if not 100,0000s of photos have been displayed by me in this way. CS5 was the last I was able to use it.
What can I do now? Where is the plug-in. Why has this function been moved?
Actually - don't answer the last question. Just help me get it back so I can work with it in CC!
Thank you all so much!

The output function in Bridge - unless it has changed a lot since last I checked - does not give me any control on how big the thumbnails should be, what colors to use, what size the large image should be. It barely gives me any control at all and that worries me. In the version I am talking about we had complete control, that's what I need again.
For example, it only gives me the ability to put 5 rows of pictures. That's not enough. I need a 100.
What are my options? Sorry, I really need help with this or I'm going to lose a ton of business.

What image gallery script is this?

Hi,
Has someone any clue about what kind of image gallery script is on this site? Pictures scale to page size in full screen , easy forward-backward browsing. And thats it, simple and user friendly. Most of image galleries are quite heavy in practice. Im looking for something much the same.
http://ryanchurch.com/john-carter-3dwork/
There is also similar on this portal http://cghub.com/ so it looks like it's something universal but can't find it anywhere.

do you mean something like this :
http://www.html.it/demo/javascript/33315/demo_index.html
or thishttp://www.html.it/demo/javascript/33314/demo_index.html
well, if yes they can be downloaded from here :
http://www.html.it/script/griglia-dinamica-stile-pinterest-con-jquery/ (press "scarica" who mean "Download")
http://www.html.it/script/photo-galley-con-filtraggio-con-jquery/ (like the precedent)
hope this coul be of help ^^
bye
T.T.

Need Help With Image Gallery

Hey all, I need a simple image gallery to load when you click a button. I've tried shadowbox but have had absolutely zero luck. I'm not sure how to load it from a flash file and I know there is work that has to be done outside of flash like in the root folder. All I need is for a simple image gallery, nothing fancy, to open when I hit a button. If anyone could explain how to use shadowbox in lamens terms or knows how to easily script a gallery that would be amazing.

What script version is your target? AS2 or AS3

Image gallery approach for additional details and add to cart option?

With efficiency and minimalist downloads for smartphone users I would appreciate advice on a product image gallery.
Currently I have an intro page and other simple information pages. My gallery pages ( four distinct pages for different leather goods) need either a pop up or a link to a new page for additional details and an option to add to cart.
Within the image gallery, How should I link each photo to the new detail/cart page? Can clicking the image itself be the action or do I need a button?

I made a mistake. I think I got it right this time. The pop up of the title box works but the images are all gone.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Lapinel Arts Leatherwork</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link href='http://fonts.googleapis.com/css?family=Overlock:400,700|Simonetta:400,900|Marcellus|Junge' rel='stylesheet' type='text/css'>
<style>
box-sizing: border-box;
body {
margin: 0;
padding: 0;
background: #fff;
font: 14px/20px 'Lucida Sans',sans-serif;
.wrap {
overflow: hidden;
.box {
float: left;
position: relative;
width: 25%;
text-align: center;
margin-bottom: 24px;
.boxInner {
position: relative;
text-align: center;
margin: 0 12px;
overflow: hidden;
img {
max-width: 100%;
.titleBox {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: -70px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
.titleBox h2 {
font-size: 16px;
margin: 0;
padding: 0 0 5px 0;
.titleBox a {
text-decoration: none;
color: #fff;
.boxInner:hover .titleBox {
margin-bottom: 0;
@media only screen and (max-width : 768px) {
.box {
width: 50%;
margin-bottom: 24px;
@media only screen and (max-width : 480px) {
.box {
width: 100%;
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
</style>
<style>
section, header, nav {
display: block;
    box-sizing: border-box;
body{
font-family: 'Marcellus', normal;
background-image: url(DRA-042010-LeatheryTexture-MBFT.jpg);
font-size: 90%;
line-height: 140%;
color: #555;
margin: 0;
padding: 0;
background-color: #FFF;
#hover-image {
background-color: #cfc6b0;
text-align: center;
img {
max-width: 100%;
height: auto;
.container {
width: 85%;
max-width: 1000px;
margin: 0 auto;
color: #000;
header h1 {
font-size: 300%;
line-height: 150%;
text-align: center;
letter-spacing: 4px;
padding: 20px 0;
color: #000;
font-weight: bold;
/* top level navigation */
nav {
    background-color: #E5E4E2;
nav ul {
display: block;
text-align: center;
margin: 0;
padding: 0;
nav li {
margin: 0;
padding: 0;
display: inline;
position: relative;
nav a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 25px;
    color: #000;
nav a:hover {
    background-color: #cfc6b0;
    color: #000;
nav span {
display: none;
/* droplist navigation */
nav ul ul {
position: absolute;
z-index: 1000;
left: 0;
top: 2em;
background-color: #E5E4E2;
text-align: left!important;
display: none;
nav ul ul li a {
display: block;
width: 12em;
border-top: 1px dotted #ccc;
.about {
padding: 0 8%;
margin: 0 auto;
text-align: center;
background-color: #E5E4E2;
.about h2 {
    font-size: 260%;
    line-height: 200%;
    margin: 0;
    padding: 0;
    color: #000;
.about p {
font-size: 110%;
line-height: 150%;
margin: 0;
padding: 0 0 20px 0;
.productsWrapper {
background-color: #000;
overflow: hidden;
padding: 30px 25px;
.product {
float: left;
width: 25%;
padding: 12px;
text-align: center;
color: #fff;
.product img {
border: 1px solid #fff;
.view_details {
text-decoration: none;
display: inline-block;
padding: 15px 20px;
border-radius: 6px;
border: 1px dotted #ccc;
color: #555;
background-color: #fff;
.view_details:hover {
background-color: #E5E4E2;
#mobileTrigger {
padding: 10px 25px;
font-size: 120%;
display: none;
color: #000;
footer {
clear: both;
background-color: #cfc6b0;
padding: 30px;
color: #fff;
text-align: center;
overflow: hidden;
footer a {
text-decoration: none;
color: #000;
    float: left;
    width: 33.33%;
    color: #000;
    border: #000
.footerBox {
    float: left;
    width: 33.33%;
    color: #000;
@media screen and (max-width: 768px) {
    .container {
width: 100%;
.product {
width: 50%;
#mobileTrigger {
display: block;
text-align: right;
nav ul {
display: none;
nav li {
display: block;
text-align: left;
nav a {
display: block;
font-size: 120%;
border-top: 1px dotted #ccc;
nav span {
display: inline-block;
float: right;
font-size: 130%;
/* droplist navigation */
nav ul ul {
position: static;
nav ul ul li a {
width: 100%;
@media screen and (max-width: 480px) {
.product {
float: none;
width: 100%;
body,td,th {
font-family: Marcellus, normal;
#copyright {
color: #000;
font-weight: bold;
</style>
<script type="text/javascript" src="http://lapinelarts.com/JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://lapinelarts.com/JS/jquery.cycle2.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
//activate mobile navigation icon when window is 768px
$('#mobileTrigger').css('cursor','pointer').click(function() {
$('#mobileTrigger i').toggleClass('fa-bars fa-times');
$('nav ul').toggle();
// show main desktop navigation onresize/hide sub navigation
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() > 768) {
$('nav ul').show();
$('nav ul ul').hide();
//listen for navigation li being clicked
$('nav ul li').click(function() {
$(this).find('ul').slideToggle();
//toggle font awesome icons
$(this).find('i').toggleClass('fa-bars fa-times');
//events if window is less than 768px
if ($(window).width() < 768) {
//stops submenu sliding up when mouse leaves mobile
$('nav ul ul').show();
else {
//activate desktop submenu on hover
$('nav ul li').mouseenter(function() {
$(this).find('ul').slideToggle();
//toggle font awesome icons
$(this).find('i').toggleClass('fa-bars fa-times');
//desktop submenu slides up when mouse leaves ul/li
$('nav ul ul').mouseleave(function() {
$(this).slideUp();
$('nav ul li').mouseleave(function() {
$(this).find('ul').slideUp();
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
</style>
</head>
<body onLoad="MM_preloadImages('810_0776_smaller.jpg')">
<header>
<h1>LAPINEL ARTS LEATHERWORKS</h1>
<nav>
<div id="mobileTrigger"><i class="fa fa-bars"></i></div>
<ul>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PROCESS</a></li>
<li><a href="#">PRODUCTS<span><i class="fa fa-bars"></i></span></a>
<ul>
<li><a href="#">PURSES</a></li>
<li><a href="#">POUCHES</a></li>
<li><a href="#">TOTES</a></li>
<li><a href="#">WALLETS</a></li>
</ul>
</li>
<li><a href="#">CART</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<section class="about">
<h2>PURSES</h2>
<p>There are several styles and sizes of purses available. Custom orders can be arranged but most of these purses are unique and with limited runs of art styles.</p>
<p>Please click on the detail button for larger and additional views and the opportunity to add the item to your cart.<strong></strong></p>
</section>
<div id="hover-image">
<div class="wrap">

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

</div>

<footer>
<div class="footerBox"><a href="mailto:[email protected]">EMAIL CATHY </a></div>
<div class="footerBox"><a href="https://www.facebook.com/LapinelArtsLeatherwork"> FACEBOOK</a></div>
<div class="footerBox">COPYRIGHT 2015</div>
</footer>
</div>
</body>
</html>

Flash Image Gallery

I purchased the Flash Image Gallery Extension. Installed and
created several beautiful working galleries.
In my image gallery (link below) there are Category titles
176, 186, etc.. When you click the titles it changes the thumbnail
pictures, while the main image remains the same.
Question: I'd like to click on a Category Title and have the
Main Fullsize image change as well. This would help visually to see
that you have in fact changed to a new category. As it is now, it
is not evident that you've changed category. You have to go to the
tn images and click there.
Can you give me some direction on how accomplish this?
Perhaps a behavior - when category title is clicked on the main
image will appear for that category? Seems like a simple edit. Can
I do such an edit on a purchased gallery template file extension?
New to flash, quite familiar with DW CS3. Below is a link to
my gallery:
My
Gallery Link

Hi
These can be linked together - it will need you to change the
destination of the 'Front Page' link (URL) to point to the
appropriate 'Gallery', in the XML you can identify sections by
using the same 'Gallery Id' from the link (URL) in the 'Front
Page'.
Does that make sense?, if you need more help then let me
know

Simple html5 image gallery

Similar Messages

Maybe you are looking for