How to make a javascript photogallery ?

Glenskie · August 23, 2012

im making a photogallery and it takes like 45 seconds to load the stupid pictures , please help.. here is my old code that will basically not work .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
<script src="jquery.jqueryloader2.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
        <script type="text/javascript">
	$(document).ready(function () {
    $("body").queryLoader2();
});
</script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body>


<!--[if ie]>
<style type="text/css">

#contentpics {
  background: #fff;
  margin-top:-803px;
  width: 803px;
  height:800px;
  float:right;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}


</style>

<![endif]-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('#20112012').click(function() {
          $('#content20112012').animate({
               height: 'toggle'
               }, 2000
		   );
     }); 
});</script>

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="lightbox.js" type="text/javascript"></script>
<script>
	$(document).ready(function(){
	    base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
	    
		$(".lightbox20112012").lightbox({
		    fitToScreen: true,
		    imageClickClose: false
	    });
		$(".lightbox20122013").lightbox({
		    fitToScreen: true,
		    imageClickClose: false
	    });
	    });

</script>
<!-- START GALLERY -->	
<div id="main">
<div id="selectclass"><br><center>
<a href="#" class="button" id="20112012">2011-2012</a>
</center>
</div>
<div id="contentpics">
<h2><center>Click on the year to view the photos for that year!</h2>(may take some time to load all pictures)</center>

<div id="content20112012" >
<br />
<center>2011-2012</center>
<br />
<div class="img">
  <a href="20112012/_DSC5904.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/_DSC5904.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/_DSC6177.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/_DSC6177.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/_DSC7193.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/_DSC7193.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div><div class="img">
  <a href="20112012/941kuzz186.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/941kuzz186.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div><div class="img">
  <a href="20112012/aloha028.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/aloha028.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div><div class="img">
  <a href="20112012/girlsbball366.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/girlsbball366.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div><div class="img">
  <a href="20112012/IMG_0014.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/IMG_0014.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/IMG_0797.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/IMG_0797.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/IMG_8555.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/IMG_8555.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/IMG_9226.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/IMG_9226.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/pics 057.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/pics 057.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/pie a cheerleader 013.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/pie a cheerleader 013.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/upperclass lunch 075.jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/upperclass lunch 075.jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>
<div class="img">
  <a href="20112012/All/Activities/A (1).jpg" class="lightbox20112012" rel="roadtrip">
  <img src="20112012/All/Activities/A (1).jpg" alt="" width="110" height="90" />
  </a>
  <div class="desc"></div>
</div>

There are so many pics and it takes forever to load

Adam · August 23, 2012

Umm.. What do you expect us to do with it?

Glenskie · August 24, 2012

haha , true ... i just want to know why its so freaking slow??? to many pictures or something?

Adam · August 24, 2012

Do you have a link? I'm guessing given it's a photo gallery it's the pictures taking forever to load, probably because the file sizes are large?

Sign In

How to make a javascript photogallery ?

Recommended Posts

Glenskie

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Glenskie

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information