Image gallery how to?

Hey guys i want to know how to create a image gallery then some sort of spry gallery after you have created a regular gallery. The design im wanting to learn how to do is something similar to this in here : www.templatemonster.com/demo/40170.html ; if any one is kind to help me out to look at how to create this one. But a little different i still want the idea of the small pictures how this person has on there template. Although i want my small images in side a web page gallery moved to left, and then have the larger image moved to the right of the page.
would any one be kind to help me out on how to do so to code and css. i'm a beginner when creating a image gallery but im trying to create one on how i explained over this sentence.
Thanks would be awesome to see how this turns out!
ps:would respond to you guys later if you guys reply i have classes at college soon.
Thank you to anyone who helps!!

For image gallery, look at FancyBox.
http://fancybox.net/
For menus in Dreamweaver go to Insert > Spry > Spry Menu Bar > Horizontal...
http://foundationphp.com/tutorials/sprymenu/customize1.php
Spry Menus 10 Commandments
http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php
Nancy O.

Similar Messages

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>

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.

How can I create a high res image gallery, need to have print res photos for a pressroom section.

How can I create a high res image gallery, need to have print res photos for a pressroom section.

If you want Muse to "pass through" your images and not adjust, compress, crop etc - you need to place your images in the lightbox EXACTLY at the right size, pre-cropped and prepped in Photoshop.
So if your light box is 800x600 the image you're dropping into that must be 800x600 exactly with no effects, rotation etc added to the lightbox frame. This stop Muse fiddling with your images, if they are perfect when inserted and you're not asking Muse to crop, expand, add effects etc. If it's perfect when inserted, Muse SHOULD also leave the resolution alone too, but I have not tried that one, but in theory, it should work.

Image gallery. How to click on image to advance to next image?

Flex 4, flash builder 4.6.
This gallery has a row of numbers. When you click on a number, a photo displays above. Each number represents a photo from data.xml. Works good. Now I want to click on a photo that is already displayed and cause the next photo in the series to display. How do I go about doing this? Thanks.
<s:Application creationComplete="service.send()">
<fx:Declarations>
        <s:HTTPService id="service" url="data.xml" result="serviceHandler(event)"></s:HTTPService>
</fx:Declarations>
<fx:Script>
        <![CDATA[
               import mx.collections.ArrayCollection;
               import mx.rpc.events.ResultEvent;
               [Bindable]
               private var images:ArrayCollection;
               private function serviceHandler(event:ResultEvent):void{
                    images = event.result.gallery.image;
        ]]>
</fx:Script>
<s:Image source="assets/poster/{imagesList.selectedItem.pic}" />
<s:List id="imagesList" dataProvider="{images}">
     <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:Label text="{data.number}" fontSize="12" />
                </s:ItemRenderer>
            </fx:Component>
      </s:itemRenderer>
</s:List>
</Application>
data.xml
<gallery>
    <image>
        <number>01</number>
        <pic>photo01.jpg</pic>
    </image>
    <image>
        <number>02</number>
        <pic>photo02.jpg</pic>
    </image>
</gallery>

Hi..
i have a simaliar problem, can anyone help..
Ive made a gallery using xml and the sparks list component. that displays images in a horz list which ofcourse can be clicked to see the larger image, but then ofcourse to view the to other images or the next image you have to hit the back button and then select another.
How can i swipe on the large image for move to the next item without having to go back to list.    Thanks.
here is what ive got so far..
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Page {id1}"
        destructionPolicy="never"
        actionBarVisible="true"
        viewActivate="init()">
    <fx:Script>
        <![CDATA[
            import valueObjects.Bookpage;
            [Bindable]private var id1:String;
            [Bindable]private var thumbimage:String;
            [Bindable]private var largeimage:String;
            private function init():void
                pgImage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
                this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe );
                var thisbpage:Bookpage = data as Bookpage;
                id1 = thisbpage.id;
                largeimage = thisbpage.largeimage;
            private function onZoom(event:TransformGestureEvent):void
                var mySprite:Sprite = pgImage as Sprite;
                if(mySprite.scaleY.valueOf() >= 1)
                    mySprite.scaleX *= event.scaleX;
                    mySprite.scaleY *= event.scaleY;
                else
                    mySprite.scaleX = 1;
                    mySprite.scaleY = 1;
            private function handleSwipe(event:TransformGestureEvent):void
                // Swipe was to the right
                if (event.offsetX == 1 ) {
                    // push the PreviousView without any data using default
                  some help here. pls ..swipe to prev image if any
                    // Swipe was to the left
                else if (event.offsetX == -1 ) {
                    // push the NextView withour any data using
                    some help here. pls ..swipe to next in list
                // Swipe was to the down
                if (event.offsetY == 1 ) {
                    // push the PreviousView without any data using default
                    // ViewTransition
                    this.actionBarVisible = true;
                    // Swipe was to the up
                else if (event.offsetY == -1 ) {
                    // push the NextView withour any data using
                    this.actionBarVisible = false;
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:SlideViewTransition id="slideUp" duration="300" direction="up" transitionControlsWithContent="false"/>
    </fx:Declarations>
    <s:states>
        <s:State name="portraitPhone" stateGroups="phone,portrait"/>
        <s:State name="landscapePhone" stateGroups="landscape,phone"/>
    </s:states>
    <s:actionContent>
        <s:HGroup>
        <s:Button icon="assets/qsearch.png" click="navigator.popView(slideUp)"/>
        <s:Button icon="assets/prev.png"/>
        <s:Button icon="assets/next.png"/>
        </s:HGroup>
    </s:actionContent>
    <s:Scroller x="0" y="0" width="100%" height="100%" >
        <s:HGroup>
            <s:Image id="pgImage" left="0" top="11" source="assets/gallery/{largeimage}" />
        </s:HGroup>
    </s:Scroller>
</s:View>

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can i show images from different folders in image gallery

Hi All,
         i have downloaded and executed photo viewer image gallery application.
          in that we r showing images sequentially what we have defined in xml file.
         but i want show images randomly or i want show images from different gallary.
Can any one help me.
thanks
Raghu.

WaqarLFC7 wrote:
On Windows:
Ctrl + click on the songs you want to group - then right click and click get info and it will ask you if you want to get info for multiple items click YES then under album name it whatever you want and them songs will be grouped into 1 album.
Mac:
Same procedure but hit SHIFT instead of CTRL.
Actually, it's right click or ctrl click, same as windows.

How do i apply a basic jQuery to my image gallery?

I'm using jQuery in order to allow an image gallery to show the same product in various colours. However the jQuery I'm using, animates the next image to sweep in from the left. And i just want the images to change in a basic way, so one image is on the screen at all times. Could someone please help me?
This is the current jQuery I'm using.
<script>
$(document).ready(function () {
    $("#red").click(function () {
        $("#img-red").show('');
                                $("#img-etchedglass, #img-blue, #img-green").hide();
    $("#blue").click(function () {
        $("#img-blue").show('');
                                $("#img-etchedglass, #img-red, #img-green").hide();
    $("#green").click(function () {
        $("#img-green").toggle('');
                                $("#img-etchedglass, #img-red, #img-blue").hide();
    $("#etchedglass").click(function () {
        $("#img-etchedglass").show('');
                                $("#img-blue, #img-red, #img-green").hide();
</script>
I have already asked on a previous stream, but could do with this sorted asap.
Thanks!!

If you have individual product images why don't you just write them to one <div> on the page (example below)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#red').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">');
$('#blue').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183385/1833845416/aglais-urticae---little-fox-1441799-m.j pg" alt="">');
$('#green').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/45/443536/blue-butterfly-1433138-m.jpg" alt="">');
</script>
</head>
<body>
<div id="productImage">
<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">
</div>
<a href="#" id="red">Red</a>
<a href="#" id="blue">Blue</a>
<a href="#" id="green">Green</a>
</body>
</html>

How do you build an image gallery in Flash CS3 actionscript3?

I am building my entire website in flash cs3, actionscript3
but I really need help building an image gallery. What I need is a
horizontal scroll bar that contains thumbs within it and then loads
the full size image right above the scroll bar. Anyone has any
suggestions for books, tutorials or even safe places to purchase
the fla that I can customize it?

if you want help understanding as3 check:
http://www.senocular.com/flash/tutorials/as3withflashcs3/
if you want to purchase a custom fla that does exactly what
you want send me an email via my website.

How to resize image gallery popup on mobile devices

Hi
I have a responsive site and the image gallery popup window does not resize on mobile devices. Please check the site site on mobile or simply shrink your browser.
I tried changing the CSS attributes for the specific @media but it didn't work well.
http://stsstone.businesscatalyst.com/gallery-by-applications-cladding
Cheers
Micha

Hi Micha,
This could be of help: http://www.rush-creek.com/lightboxHTHcustCap1a/lightboxHTHcustCap1a.html
Kind Regards,
Alex

How can I place a Lightroom 3 image gallery in a Dreamweaver page?

I would like to use an image gallery that I built in Lightroom 3 in a Dreamweaver CS5 website. I would like the image gallery to operate on my Dreamweaver page, not to be re-directed to a different page.
I'm pretty sure this is possible, but in my search for help in the forums, books, etc., I am not having much luck. Perhaps I'm using the wrong search words? Help to direct me would be very much appreciated. Cheryl B.

You'll need to work in CodeView.
Copy the relevant code from your image gallery page into your site page. Adjust paths to images & scripts as necessary.
Another simpler approach, insert an iframe into your site page. Point the iframe src to your gallery.html page. Adjust iframe height and width to accommodate the size of your gallery page.
http://w3schools.com/html/html_iframe.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to implement Google "Show more results" type image gallery

Hello all,
Need help with implementation of "Show more results" for an image gallery, similar to google images.
The requirement is to display 10 images at a time and on click of button show the next 10 images by ajax. I have a db with image names and folder that stores the images.
Need some pointers as I cannot get my head around this.
Much appreciate your help.

Google for tutorials on AJAX and XMLHtttpRequest

How to insert "+" in image gallery caption

Hi,
I hope you can help. I created an Image Gallery in
Dreamweaver 8. I also added captions, however, some of my captions
require the "+" sign and I can't get it to show up in the captions.
I tried editing the code using + and everything else known
to man. There is probably and easy solution, but I need help.
Thanks.

The captions are embedded in the Flash Gallery? You would
have to ask this
in a Flash forum.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"off2theocean" <[email protected]> wrote in
message
news:glsb2f$22a$[email protected]..
> Here is a link to the test page.
>
http://www.rickgaulttraining.com/about_us1.html
>
> Some of the horses in the gallery have a '+' after there
name, but it's
> not
> showing up. The '+' sign designates the horse's show
record so it's
> pretty
> important.
>
> Hope you can help. Thanks!
>

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

Using iWeb/MobileMe/iPhoto Gallery: how do I get them all to work together?

Hi all. I'm using iWeb09 and Mobile Me. What I'm trying to do is create a website using iWeb and host it onto Mobile Me. I registered a domain name and have placed in Mobile Me. I replaced a previous domain name that I had in there that I used for my image gallery since Mobile Me only uses one domain name. I can see the page I created hosted, no problems.
The problem I'm having is when I deleted the first test site I lost the ability to use the Mobile Me Widget with my gallery. Now it does not see my gallery with my photos. Now the iPhoto gallery on Mobile Me still sees the previous domain name when I type it in. I liked it that I had it linked to the online gallery because then you could view the other photo albums.
So my questions are these:
1- How do I get my widgets to see my Mobile Me again?
2- Do I have to change anything with my gallery to make it be seen?
3- What should I be putting in the site name?

Not for me. None of the MMe galleries will load online or are available in the MMe Gallery widget. Still something amiss.
UPDATE: I take that back. It just took about 5 minutes for the galleries to load. So very slow but they finally did. Some movies in the galleries never would load, like this one: http://gallery.me.com/toad.hall#100411. If you can get it to load and play let me know.
Message was edited by: Old Toad

Image gallery how to?

Similar Messages

Maybe you are looking for