1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image Gallery Revamp help

Discussion in 'HTML & Website Design' started by doh102, Jan 8, 2012.

0
  1. #1
    Hello all,

    I am sorry if this is not the proper section for this, but I am looking for a way to revamp my image gallery, and have tried multiple places to find this answer. I manage a small company's website, and would like to make the image galleries look better.

    I found this: http://smoothgallery.jondesign.net/showcase/gallery/

    and would like to use it for my site.

    This is my site now:

    http://www.stonezoneco.com/trialpics.html

    I would like to replace this with the script provided by smoothgallery, but am unsure as to how to go about doing something like this. I downloaded what the site provided, but I haven't a clue how to institute it. Any help that can be given would be greatly appreciated, especially in the form of step-by-step instructions. I do not know how to utilize the .js scripts, or why I needed to download files if they are just lines of code...very confused. Thanks in advance for any help!
     
    doh102, Jan 8, 2012 IP
  2. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #2
    Hello,
    You have had to download the files as the lines of code will tell the browser what to do with your pictures.

    Firstly which set of files did you download?

    If you tell me that I can set up the same gallery and explain step by step for you.

    Thanks,
    Phil
     
    Toycel, Jan 9, 2012 IP
  3. doh102

    doh102 Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Toycel,

    Thanks for the reply. I downloaded the first option on this page: http://smoothgallery.jondesign.net/download/
     
    doh102, Jan 9, 2012 IP
  4. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #4
    Right this is the code from the Demo.htm page so this will need editing to suit your needs.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>JonDesign's SmoothGallery demo</title>
		<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" /><!--these 5 CSS and JS files are in the zip file and need to be put on your server-->
		<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
		<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
		<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="scripts/jd.gallery.js" type="text/javascript"></script>
	</head>
	<body>
		<h1>
			<a href="http://english.jondesign.net/">
				<span class="company">JonDesign's</span>
			</a>SmoothGallery 2.1beta1 <sup>demo</sup></h1><!--anything in the H1 can be removed from this as this is the header for the demo page-->
		<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {
					timed: true
				});
			}
			window.addEvent('domready',startGallery);
		</script>
		<div class="content">
			<div id="myGallery">
				<div class="imageElement">
					<h3>Item 1 Title</h3>
					<p>Item 1 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/1.jpg" class="full" /><!--The images need to be changed to your images-->
					<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 2 Title</h3>
					<p>Item 2 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/2.jpg" class="full" />
					<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 3 Title</h3>
					<p>Item 3 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/3.jpg" class="full" />
					<img src="images/brugges2006/3-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 4 Title</h3>
					<p>Item 4 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/4.jpg" class="full" />
					<img src="images/brugges2006/4-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 5 Title</h3>
					<p>Item 5 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/5.jpg" class="full" />
					<img src="images/brugges2006/5-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 6 Title</h3>
					<p>Item 6 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/6.jpg" class="full" />
					<img src="images/brugges2006/6-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 7 Title</h3>
					<p>Item 7 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/7.jpg" class="full" />
					<img src="images/brugges2006/7-mini.jpg" class="thumbnail" />
				</div>
				<div class="imageElement">
					<h3>Item 8 Title</h3>
					<p>Item 8 Description</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/8.jpg" class="full" />
					<img src="images/brugges2006/8-mini.jpg" class="thumbnail" /><!--If you need any more images then you can add to this in the same fashion--> 
				</div>
			</div>
		</div>
	</body>
</html>
    Code (markup):
    Once you have unzipped the folder you will need to create three folders on your server (one for the css, one for the scripts and one for the images).
    Create your gallery page and position the Mygallery div in the right place, if all the URLs are pointing to the right places then you should have the gallery up and running
     
    Toycel, Jan 9, 2012 IP
  5. doh102

    doh102 Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Do the css, scripts, and images need to be in specific folders with specific names? Or can I upload everything to my public.html portion of the site? Also, if my images are already uploaded, do they need to be moved to a folder, or can I just change the file names to my specific image names/locations?
     
    doh102, Jan 9, 2012 IP
  6. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #6
    All the files can be put where ever you want to put them as long as in the code they are linked correctly

    so on the example rather than 'images/brugges2006/4.jpg' it would just be '4.jpg' the same with the scripts and CSS files too.

    They are just in folders here so that you can manage the back end of the site a little easier
     
    Toycel, Jan 9, 2012 IP
  7. doh102

    doh102 Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    got it to function...apparently I just needed to put the scripts and css files in folders just like the were downloaded
     
    doh102, Jan 9, 2012 IP
  8. doh102

    doh102 Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    so now, from here, is there anyway I can alter this code somewhat to do the following:

    I want to make the description bigger...

    I'd like to make the picture slightly bigger, (I would like it to take up the majority of the screen)

    Can I make it so when I click on the "Open image" light bulb symbol in the middle of the pic, it links to the picture?
     
    doh102, Jan 9, 2012 IP
  9. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #9
    Yes there is.

    You would need to edit the CSS and the widths in JS to create a bigger image.

    I'll have a play today and post later
     
    Toycel, Jan 10, 2012 IP
  10. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #10
    Hey have done this as a priority this morning.

    If you open the 'jd.gallery.css' file you can change the width and height of the gallery in this section it is right at the top of the css file. 
    #myGallery, #myGallerySet, #flickrGallery
{
	width: 600px;
	height: 450px;
	z-index:5;
	border: 1px solid #000;
}
    Code (markup):
    to make the caption bigger you need to edit these sections:

    .jdGallery .slideInfoZone
{
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 0px;
	left: 0;
	bottom: 0;
	height: 50px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

* html .jdGallery .slideInfoZone
{
	bottom: -1px;
}

.jdGallery .slideInfoZone h2
{
	padding: 0;
	font-size: 200%;
	margin: 0;
	margin: 2px 5px;
	font-weight: bold;
	color: inherit;
}

.jdGallery .slideInfoZone p
{
	padding: 0;
	font-size: 150%;
	margin: 2px 5px;
	color: #eee;
}
    Code (markup):
    Changing the font size will obviously make it bigger but you also need to change the height of the .jdgallery .slideinfozone div to make it fit right too.

    Lastly the Open image is just a link in the HTML code
    <div class="imageElement">
					<h3>Picture 1</h3>
					<p>This is a picture of a furry man</p>
					<a href="#" title="open image" class="open"></a>
					<img src="images/brugges2006/1.jpg" class="full" />
					<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
				</div>
    Code (markup):
    If you change the 'a href' from a hash tag to the URL of the image it should open that image.

    Cheers,
    Phil
     
    Toycel, Jan 10, 2012 IP
    doh102 likes this.
  11. doh102

    doh102 Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thank ya much sir.....any recommendations on a program to use to fix the css and js scripts?
     
    doh102, Jan 10, 2012 IP
  12. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #12
    The JS scripts you shouldn't need to play around with much. I use Notepad++ that is a free text editor for the code, there are others out there too.
     
    Toycel, Jan 10, 2012 IP
  13. doh102

    doh102 Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    PMed you on both issues...hopefully I did that right at least.
     
    doh102, Jan 10, 2012 IP