SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help for a dynamic photo gallery

    Hello guys,

    How are you doing?
    I am trying to make a page that could display an unlimited amount of images.
    I mean that I want to be able to change the amount of pictures as I want.
    But in the same time I want the gallery to look like a table without making a table in my html.

    Does anyone have an idea?

    My next question is:

    Is there a way to zoom in on images and I mean not maginifying the picture while i showing the others in a thumbnail but more like really zooming in? as if everything got much bigger ?

    Thanks in advance

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made some big progress using a different way ..
    I made thumbnails without making thumbnail images folder ..
    but the thing is .. when i click on an image it gets bigger ...
    i want to be able to delete an image by right clicking on it ..
    i mean getting the option of deleting it out of the array ..
    any idea's?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That means taking control of the browser gui, which is a big no-no.

    A more acceptable solution is to have an icon appear, perhaps a trashcan or a red X, on or near the image when you hover over it
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and do u have a website with instructions on it?
    thanks in advance

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here's a quick example of a simple image gallery, using the code from A List Apart as inspiration, using some jQuery to provide a delete icon at the top right of the image, and the ability to remove that image from the gallery.

    The next step from here would be to add on the lightbox gallery.

    style.css
    Code css:
    div.float {
    	float: left;
    	position: relative;
    }
    div.float .delete {
    	position: absolute;
    	right: 0;
    	top: 0;
    }
    div.float p {
    	text-align: center;
    }
    div.gallery {
    	border: 2px dashed #333;
    	background-color: #ffe;
    	width: 40em;
    }
    div.gallery .float {
    	margin: 1em;
    }
    div.spacer {
    	clear: both;
    }
    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    	<title>Template</title>
    	<link type="text/css" rel="stylesheet" href="style.css">
    	</style>
    	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"> </script>
    </head>
    <body>
    <div class="gallery">
    	<div class="spacer">
    	  &nbsp;
    	</div>
    	<div class="float">
    	  <img src="image1.gif" width="100" height="100" alt="image 1">
    	  <p>caption 1</p>
    	</div>
    	<div class="float">
    	  <img src="image2.gif" width="100" height="100" alt="image 2">
    	  <p>caption 2</p>
    	</div>
    	<div class="float">
    	  <img src="image3.gif" width="100" height="100" alt="image 3">
    	  <p>caption 3</p>
    	</div>
    	<div class="float">
    	  <img src="image1.gif" width="100" height="100" alt="image 1">
    	  <p>caption 1</p>
    	</div>
    	<div class="float">
    	  <img src="image2.gif" width="100" height="100" alt="image 2">
    	  <p>caption 2</p>
    	</div>
    	<div class="float">
    	  <img src="image3.gif" width="100" height="100" alt="image 3">
    	  <p>caption 3</p>
    	</div>
    	<div class="spacer">
    	  &nbsp;
    	</div>
    </div>
    <script src="script.js"> </script>
    </body>
    </html>

    script.js
    Code javascript:
    $('.gallery .float').hover(function () {
    	$('img', this).after('<a class="delete" href="#delete"><img src="delete-icon.jpg"></a>');
    	$('a.delete', this)
    		.css({opacity: 0})
    		.stop()
    		.animate({opacity: 1}, 500);
    }, function () {
        $('a.delete', this)
    		.stop()
    		.animate({opacity: 0}, 500, function () {
    			$(this).remove();
    		});
    });
    $('a.delete').live('click', function () {
    	$(this).parents('.float').remove();
    	return false;
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply
    but most of my work is done in the script
    and i am not using jquery ..
    do u have a website with info about this subject please?
    thanks a lot

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    No website that easily comes to mind.

    As lightbox uses jQuery it seemed to be a fairly safe assumption that it would be used on the page.

    In terms of standard javascript, to provide a delete link when someone hovers over an image in the gallery is quite easily performed as well.

    you are well placed at this forum to gain advice on how to achieve good and stable javascript techniques for your web page. If any of the advice that is given requires correction, there are plenty of people who provide it.

    The only difficulty is that when the right information is bring provided, there is very little in the way of other people stepping forward to say that they agree, because that is seen as not providing as much useful assistance as a regular post normally provides.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I get your point.
    Thaks for the help till now.
    I am mainly stuck with a couple of problems for now and questions.
    I would like to know if these can be done in javascript.
    If you have any idea about them or someone else, I will be grateful.
    At least a search term is enough to use.

    1- I made my gallery in an array in my script. When i click with the mouse on one of the pics, all images get bigger and the main div too. Every image is in a div.
    I want when I click on a pic that I see that pic directly and next the first image in the first div.

    2- I need to be able to jump from a div to another with my arrow keys and not move right and left like a normal website that has bigger width than the users resolution. (advanced scrolling)

    3- flash like effects

    4- I am using float to put the divs next to each other. But is there a way to calculate the number of images and then according to that make a suitable table shape instead of floats?

    Thanks in advance

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    In my humble opinion, that sounds like a large amount of development time would be involved, for which paying for a developer to perform the work would be more appropriate.

    However, having said that, if you have code that you've put together yourself that you wish to gain assistance with in debugging, we'll happily help where we can with that.

    Working with keystrokes across multiple web browsers can become very tricky, so http://www.quirksmode.org/js/keys.html is a good resource to help figure out what's required.

    Flash effects are "hard work" in normal javascript mostly due to a variety of web browser differences. This is where standing on the shoulders of giants becomes very useful, because the problems tend to be reliably known and well solved.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, thanks for the reply.
    Indeed I am working on it myself. I am still in university and I want to make my own script.

    By the way, in my css I added a hover for the border of the images. It was working until I changed something in my javascript and added a new color to my borders.
    How can I use hover in javascript again?

    Thanks again for your help and time.
    I will check the website out.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Javascript can perform similar hover effects by using the onmouseover and onmouseout events
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    o my God ..
    How could I forget that? lol ...
    I think thats what you get when you have been programming something for two weeks.
    thanks a lot ..

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having some problems in my script:

    - If i press on an image the whole gallery gets bigger .. including the main div.
    As if i am magnifying everything ..
    but the problem is when i click on an image the first image gets displayed and not the one i clicked on.

    - how can i make sure that on the next click everything goes back to normal?

    i mean i tried doing: onclick="zoomIn()"; onclick="zoomOut()";
    but it doesnt work like this .. the first onclick function only works.

    - how can i make use of nextSibling (or anything similair) to jump from a div to another?

    thanks in advance


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •