Insert Galleria into en existing HTML Page

**hmmm** · April 27th, 2009, 03:08 PM

Well...I do admit I am totally lost....I JUST can not understand how to build Galleria (demo 1) style into one of my pages.
http://devkick.com/lab/galleria/demo...#img/lotus.jpg

Call me an idiot...but I just can not understand it.

In my web site, www.ayvalikholidayhouse.com , I have four pages of "photo gallery". I just want to reduce it to one page like above style.

Can anyone help to this "brain dead" guy please?

**Train** · April 27th, 2009, 06:29 PM

You will need to dig " jquery.galleria.pack.js " , " galleria.css " " /media/js/jquery.js " out of your tif to see what they say. They are part of that webpage.

Put a copy of each in the folder where you are saving the file to and have the pictures in the same folder.

I like that set up. Might play with it a bit.

**hmmm** · April 28th, 2009, 02:37 AM

Thank you for your answer Train.
If you "play with it a bit" :=) ...and you manage to set it up, kindly tell me how you have done it please.

**SpywareDr** · April 28th, 2009, 06:01 AM

Instructions can be found here:

http://devkick.com/lab/galleria/

and here:

http://monc.se/kitchen/146/galleria-...-image-gallery

Issues (discussions):

http://code.google.com/p/galleria/updates/list

**Train** · April 28th, 2009, 11:02 AM

FS galleria Has some nice graphics.

**hmmm** · April 28th, 2009, 11:11 AM

SpywareDr, I read those articles several times but if you are a novice like me...
OK, I admited that I am an IDIOT.....
I understand below

1. Download the latest jQuery release
2. Download the Galleria plugin and the galleria.css file.
3. Add the following lines inside your <head>:
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.galleria.js"></script> <script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>

I just haven't got a clue about BELOW

4. Create an unordered list of images and give it an identifier (in this case class='gallery')
5. Style your gallery using CSS. Galleria has a default style that you can easily override and modify.
The real beauty of Galleria lies in it’s simple HTML code. Simple create an unordered list, add a couple of images and Galleria will automatically create clickable thumbnails. Here is some examples on how Galleria will interpret your HTML:

Create and scale a clickable thumbnail:

<ul class="gallery"> <li><img src="i/i01.jpg" title="A caption" alt="Image01"></li> </ul>
Create a thumbnail, but don’t scale it (fit and center):

<ul class="gallery"> <li><img class="noscale" src="i/01.jpg" title="A caption" alt="Image01"></li> </ul>
Use a custom thumbnail and center it to fit inside the thumbnail container:

<ul class="gallery"> <li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li> </ul>

Sorry guys, I feel really embarrassed...you probably are laughing at me.

**Train** · April 28th, 2009, 11:26 AM

If you go to
http://devkick.com/lab/galleria/demo...#img/lotus.jpg
Go to view and select source
then scroll down in notepad, you will see the list they have.
<ul class="gallery_demo_unstyled">

<li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="img/lightning.jpg" alt="Lightning" title="Black & White"></li>
<li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>

</ul>

Kind of neat as the title is where you can give a explaination about the picture.

**Train** · April 28th, 2009, 11:28 AM

The explanation is below the picture. NICE!

**hmmm** · April 28th, 2009, 01:43 PM

OK This is what I have done.....
1)Downloaded and uploaded to my website below files.
galleria.css
jquery.galleria.js
jquery-1.3.2.js
2)Inserted below to the head section
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.galleria.js"></script> <script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
3)Inserted below to my source code of my web page.
<ul class="gallery_demo_unstyled">

<li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
<li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="img/lightning.jpg" alt="Lightning" title="Black & White"></li>
<li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>

</ul>
4)uploaed few pics to same file structure and named them like: stones.jpg, flowing-rock.jpg etc.

Am I doing OK so far????

Only the file names are showing....could it be the jpg file paths?

FOR INSTANCE, SHOULD IT BE LIKE BELOW
<li><img src="img/www.ayvalikholidayhouse.com/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>

**Train** · April 28th, 2009, 06:20 PM

In that format yes. I might make it look like this.

<li><img src="img/www.ayvalikholidayhouse.com/flowing-rock.jpg" alt="Flowing Rock" title="Notice the smooth curves."></li>

But that is just how I may look at it though.

**SpywareDr** · April 29th, 2009, 05:06 AM

If your source (.html) file contains a line like this:

it means to look in the same directory containing your source (.html) file for a directory named "img".

And then in that "img" directory, look for a file named "flowing-rock.jpg".

In other words, from your current position the path to your flowing-rock.jpg image file is:

img/flowing-rock.jpg

Make sense?

**SpywareDr** · April 29th, 2009, 05:15 AM

Originally Posted by Train

In that format yes. I might make it look like this.

<li><img src="img/www.ayvalikholidayhouse.com/flowing-rock.jpg" alt="Flowing Rock" title="Notice the smooth curves."></li>

But that is just how I may look at it though.

That's not going to work; but, you could set it up like this:

**hmmm** · April 29th, 2009, 10:06 AM

I think I shall give up...it just simply doesn't work.
Could you please have a look at my source code of below template file......may be you can see what I might have done wrong.....

www.ayvalikholidayhouse.com/templatej.html

Just to remind you, names of the downloaded and uploaded files are;
galleria.css
jquery.galleria.js
jquery-1.3.2.js

Sorry again

**Train** · April 29th, 2009, 11:49 AM

Doc and I are talking about different things I believe.

Need some time , but hope to throw something together and post a link later today.

**Train** · April 29th, 2009, 03:58 PM

Check this out. and I will post the changes in a bit.

Thread: Insert Galleria into en existing HTML Page

Thread Tools

Search Thread

Display

Insert Galleria into en existing HTML Page

Thread Information

Users Browsing this Thread

Posting Permissions