I have been trying like heck to add this image library to my website. The link to it is here: http://devkick.com/lab/galleria/
Can anyone baby step this webdeveloping infant to image gallery success? I only have a working knowledge of html and css.
erek
Jump to Post— peter_budo 2,532You will need to explain more in detail any problems you facing as the instructions below the gallery sees to me straight forward...
Jump to Post— MidiMagic 579Where are the images placed on your server? It sounds like the images are not where your code expects them to be, or that you do not have permission to use them anywhere except on the server.
Since the images are not in your web page folder, did you …
You will need to explain more in detail any problems you facing as the instructions below the gallery sees to me straight forward...
Sure, this is fairly long.
Going through the steps:
1) Download the latest jQuery release.
*I did this and put it in a folder: (FILE: jquery-1.3.2.)
2) Download the Galleria plugin and the galleria.css file.
*I downloaded this and also put it into the folder (FILE:
)
3) Add the following lines inside your <head>.
*I did this.
4)Create an unordered list of images and givve it an identifier.
*Not sure if I did this correct. Where do I put this???
5)Style your gallery using CSS. Galleria has a default style.
* I like the default sytle (FILE: galleria.css)
***Notes:
My code shows below where I put the information. The files that I downloaded for this seem to have different names than the script that I copied and pasted into the [HEAD] area of my code. Or am I doing this wrong? For example:
<link href="[B]galleria.css[/B]" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="[B]jquery.js[/B]"></script> <script type="text/javascript" src="jquery.galleria.js"></script> <script type="text/javascript"> [B]jQuery(function($) { $('ul.gallery').galleria(); });[/B] </script>*galleria.css* the filename for this 'originally' was: galleria[1].css. I am pretty sure i should just change the filename to galleria.css but want to make sure.
** the filename for jQuery that I downloaded was: jquery-1.3.2.min.js. Is this the same file? (minimized).
*
jQuery(function($) { $('ul.gallery').galleria(); });* I have absolutely no idea what this is or what I am supposed to do with this since my experience up to this point has only been HTML and CSS.
----------------------------------------------------------------------------------
*I think I am not linking the jQuery, the Galleria plugin and the galleria.css file correctly. Below is my code:
My "Image Gallery" page html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!---Image Gallery--->
<link href="gallery/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>
<!---/Image Gallery--->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>.:Image Gallery:.</title>
<link href="../p7_cssexpress/p7exp/p7exp.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="p7_express/p7exp/p7exp.js"></script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #p7menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->
</head>
<body onLoad="p7_ExpMenu()">
<div id="body"> <!--Background From Homepage-->
<div id="banner">
<h1>Country Hoppers</h1>
</div>
<!---This Is Menu Stuff--->
<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="../CountryHoppers.html">Home</a></li>
<li><a class="trigger" href="#">Profiles</a>
<ul>
<li><a href="../Profiles/Candice.Profile.html">Candice</a></li>
<li><a href="../Profiles/Erek.Profile.html">Erek</a></li>
<li><a href="../Profiles/Interview.html">Interview</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Event</a>
<ul>
<li><a href="../Event/Phase1.html">Phase I</a></li>
<li><a href="../Event/Phase2.html">Phase II</a></li>
<li><a href="../Event/Phase3.html">Phase III</a></li>
<li><a href="../Event/Maps.html">Maps</a></li>
<li><a href="../Event/Preparations.html">Preparations</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Bikes & Equipment</a>
<ul>
<li><a href="../BikesAndEquipment/Bikes.html">Bikes</a></li>
<li><a href="../BikesAndEquipment/Filming.html">Filming</a></li>
<li><a href="../BikesAndEquipment/Gear.html">Gear</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Partners</a>
<ul>
<li><a href="../Partners/Charity.html">Charity</a></li>
<li><a href="../Partners/Sponsors.html">Sponsors</a></li>
<li><a href="../Partners/Donations.html">Donations</a></li>
</ul>
</li>
<li><a href="../Blog/Blog.html">Blog</a></li>
<li><a href="../ImageGallery/ImageGallery.html">Image Gallery</a></li>
<li><a href="../VideoClips/VideoClips.html">Video Clips</a></li>
<li><a href="../Travelogue/Travelogue.html">Travelogue</a></li>
<li><a href="../ContactUs/ContactUs.html">Contact Us</a></li>
</ul>
</li>
</ul>
<br class="clearit">
</div>
<!---/This is the end of the Menu--->
<p>This is a test to see if the Image Gallery Page works. And it does</p>
<!---Image Gallery..Images-NOt sure if this is the correct place-->
<body>
<h1>Galleria Demo</h1>
<ul class="gallery">
<li><img src="../Images/candice/candice293.jpg" alt="Photo1" title="Photo1"></li>
<li><img src="../Images/1.png" alt="Photo2" title="Photo2"></li>
<li><img src="../Images/candice/candice4.jpg" alt="Photo3" title="Photo3"></li>
<li><img src="../Images/african.gif" alt="Photo4" title="Photo4"></li>
<li><img src="../Images/b3.jpg" alt="Photo5" title="Photo5"></li>
<li><img src="../Images/erek.png" alt="Photo6" title="Photo6"></li>
<li><img src="../Images/practicebox.png" alt="Photo7" title="Photo7"></li>
<li><img src="../Images/bar.jpg" alt="Photo8" title="Photo8"></li>
<li><img src="../Images/african2.gif" alt="Photo9" title="Photo9"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
<!---/Image Gallery--->
</body>
</html>The images are showing on the page but they only show as bullets.
Any help would be great.
Erek
You will need to explain more in detail any problems you facing as the instructions below the gallery sees to me straight forward...
Just checking to see if you saw my most recent post. :)
Test
Where are the images placed on your server? It sounds like the images are not where your code expects them to be, or that you do not have permission to use them anywhere except on the server.
Since the images are not in your web page folder, did you remember to give them public read permission? Did you give the folders containing the images public read permission?
Are the image locations in the relationship to the locations of the html files that you think they are in?
Are the images stored on the server? I had one person who expected the html file on the server to be able to read the image files stored on his home computer.
You got me!! I haven't uploaded any of my files unto the server. I wanted to get everything up and running before I did that, but I guess I need this step in order to complete the project.
Thanks. I will upload my files sometime this week and then try it again.
~Erek~ ;)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.