Insert Galleria into en existing HTML Page

This where I had to make the other changes.

<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>



Yes, if you source my page you will find this.

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>

I got the jquery.min.js from this galleria-1.0b.zip file
http://galleria.googlecode.com/files/galleria-1.0b.zip

Those and the graphics are the only changes made so far.

Oh, that loaded truck scaled 105,500 pounds.

You have a directory (folder) named "Web Album" on your site, here:

http://www.ayvalikholidayhouse.com/Web Album

(Click the link to try it ... and you'll see a listing of your image files stored in your "Web Album" directory)

but, it doesn't appear that you have a directory named "img":

http://www.ayvalikholidayhouse.com/img

(Click the link to try it ... and you'll get a "Not Found" error).

With that in mind, take a look at this section of your http://www.ayvalikholidayhouse.com/templatej.html file:

Code:

---

<ul class="gallery_demo_unstyled">
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
</ul>

---

In order for those lines of code to work, you must create a directory (folder) named "img" (just like you created "Web Album") a-n-d then put your "flowing-rock3.jpg" image file in your new "img" directory. Once you get that done, the URL:

http://www.ayvalikholidayhouse.com/i...wing-rock1.jpg

will work. And, once it's working, the code above should work too.

Note: If it were mine though, I'd insert a "http://" before the "www." ... so that it looks like this:

Code:

---

<ul class="gallery_demo_unstyled">
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock1.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock2.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock3.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock4.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock5.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock6.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock7.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock8.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img src="http://www.ayvalikholidayhouse.com/img/flowing-rock9.jpg" alt="Flowing Rock" title="Flowing Rock Caption" /></li>
</ul>

---

Until I got galleria.css in the same folder as the webpage, the graphic thumbs where vertical instead of horizontal.

Yeah, well done Train...I envy you, I wish I could go as far as you went....
Of course in my case everything must be in my existing Web Page (Inserted)
I have changed the file paths of my images like SpywareDr said..all the pics are now showing but no where like the Galleria I am afraid.

http://ayvalikholidayhouse.com/templatej.html

AS I SAID BEFORE....

1)Downloaded and uploaded to my website below files.
galleria.css
jquery.galleria.js
jquery-1.3.2.js
DO YOU THINK THEY ARE THE CORRECT FILES?

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>
DO YOU THINK THEY ARE THE CORRECT SCRIPTS?

3)Inserted below to my source code of my web page.
<ul class="gallery_demo_unstyled">
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock1.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock2.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock3.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock4.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock5.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock6.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock7.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock8.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
<li><img
src="http://www.ayvalikholidayhouse.com/img/flowing-rock9.jpg"
alt="Flowing Rock" title="Flowing Rock Caption" /></li>
</ul>
DO YOU THINK ABOVE IS CORRECT?

Thank you guys

I did not check "boldblue1.css" , which may be throwing things for a loop.

But I wonder what would happen if frames where used. I will play with your site and see what I can do. Maybe someone will give us some help!

Edit: Just noticed you do not list a primary picture.
<li class="active"> does that.

<li class="active">
I have just fixed that one Train.
Thanks.
For the time being it makes no differance

Seems somehow we can not get some script to work right.
You did leave a lot out, it seems.

Where I am at the moment. Still hammering at it.

Train, by looking at below do you think I may have either the wrong files or the wrong script? Please compare the highlighted sections.

galleria.css and jquery.galleria.js match but not jquery-1.3.2.js

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>

galleria.css
jquery.galleria.js
jquery.js
Should be what you have.

I have jquery.min.js in stead of jquery.js is all.

I can not find jquery.js to download. so I left jquery-1.3.2.min.js intact but changed the script accordingly. Please see below.

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>

It still is not working but you have said in your previous post.....
"You did leave a lot out, it seems."

May be you can tell me what i had left out please.

I suggest:
Open my link.
Go to View and select source
Go to file and select print.

Do the same with yours and compare the two.

You will see you left out some scripts.

Got this to work now. :eek:

It will take a while, but will keep trying to get what you want. We will see what happens.

Other than that, sorry I hit a wall.
Suggestion, that can be used as the graphics page using blank that way they can close the page or link to return.

Best I can do, SORRY! :( :(

Train, Please don't say that you are sorry, you are an absolute gem. Thank you so much for all your affords and your time.
Like you said, I can use it as the graphics page using blank.
As I understand one can embed Galleria into an HTML page. But in my personal opinion instructions for that is a bit poor. Particularly for me who has rather limited knowledge.
You never know, one day you might come to our part of the world.....you'll definitely our guest.:)

Just watch it as I am using jquery.min.js.
I have found I can use larger graphics with a slight change from
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:Black;}

to:
#main_image{margin:0 auto 60px auto;height:530px;width:800px;background:white;}

And the white background was gained also..
Check your PMs.