photo album

dragging pictures from another one

[wa9578]

Hi all,

I'm trying to make it so when you click on one of the drop down menus, it opens up a photo album.

I managed to make the first one fine and worked without any problems at all.

I've subsequently tried to add a second album (for when you click the second link) but it's still using the pictures from the first album :S.

I'm very new to this sort of thing and created it using tutorials I've found, so it could be something really simple that I'm missing off.

<li><a href="#" >Photo's</a>
<ul>
<script type="text/javascript"
src="slide.js"></script>
<script type="text/javascript">
<!--
var viewer = new PhotoViewer();
viewer.add("1JacksonHouseStudents.jpg");
viewer.add("8CoNetstudents.jpg");
viewer.add("DSCI0029.jpg");
viewer.add("DSCI0064.jpg");
viewer.add("DSCI0121.jpg");
viewer.add("SANY0285.jpg");
//--></script>
<li><a href="javascript:void(viewer.show(0))">Students</a></li>

<script type="text/javascript"
src="slide.js"></script>
<script type="text/javascript">
<!--
var viewer = new PhotoViewer();
viewer.add("2JacksonHouseExterior.jpg");
viewer.add("3JacksonHouseExterior.jpg");
viewer.add("4JacksonHouseExterior.jpg");
viewer.add("DSCI0001.jpg");
viewer.add("DSCI0021.jpg");
viewer.add("SANY0257.jpg");
viewer.add("SANY0288.jpg");
viewer.add("toxtethlibrary.jpg");
//--></script>
<li><a href="javascript:void(viewer.show(0))">Location</a></li>
</ul>
<li><a href="#">Jobs</a></li>

Thanks in advance for your help it is greatly appreciated.

[Fotiman]

A couple of things...

1. You are including the external file slide.js multiple times. You probably only need to include it once.

2. Don't wrap the contents of <script></script> tags with HTML comments. It's just a bad practice, left over from Netscape 1. It hasn't been needed for a loooooooooong time.

3. You are creating a new PhotoViewer for each link, but you're assigning them both the same variable. Rename the second one and it should work.

4. Your code will not work for anyone with JavaScript disabled. For example, they will see a link that says Students that does nothing. If there's a way to make it work without JavaScript and then progressively enhance it to use the viewer, that's what I would recommend. For example, have the "Students" link actually point to something (like one of the pictures).

5. There technically is no such thing as a "javascript:" protocol, so it's best to avoid putting JavaScript directly in an href and instead use the onclick event handler.

Try this:

<li><a href="#" >Photo's</a> 
  <ul> 
    <li><a href="1JacksonHouseStudents.jpg" onclick="studentsViewer.show(0);return false;">Students</a></li> 
    <li><a href="2JacksonHouseExterior.jpg" onclick="locationViewer.show(0);return false;">Location</a></li> 
  </ul>
</li> 
<li><a href="#">Jobs</a></li>
<!-- 
  ...
  Put scripts just before the closing body tag 
-->
<script type="text/javascript" src="slide.js"></script> 
<script type="text/javascript">
// Create the viewer for students
var studentsViewer = new PhotoViewer(); 
studentsViewer.add("1JacksonHouseStudents.jpg"); 
studentsViewer.add("8CoNetstudents.jpg"); 
studentsViewer.add("DSCI0029.jpg"); 
studentsViewer.add("DSCI0064.jpg"); 
studentsViewer.add("DSCI0121.jpg"); 
studentsViewer.add("SANY0285.jpg"); 
// Create the viewer for locations
var locationViewer = new PhotoViewer(); 
locationViewer.add("2JacksonHouseExterior.jpg"); 
locationViewer.add("3JacksonHouseExterior.jpg"); 
locationViewer.add("4JacksonHouseExterior.jpg"); 
locationViewer.add("DSCI0001.jpg"); 
locationViewer.add("DSCI0021.jpg"); 
locationViewer.add("SANY0257.jpg"); 
locationViewer.add("SANY0288.jpg"); 
locationViewer.add("toxtethlibrary.jpg");
</script> 
</body>

This might also be improved by removing the inline event handlers and attaching them view the JavaScript, but this example will hopefully get you going. :)

[wa9578]

knew it was something simple, least I know now for future reference. I've got it working now thankyou :D (only by changing the name (didn't know before))

I'll try with your code once I get home (I understand the principle but need visual and didn't want to play too much when about to go home)

Thanks for your help :D

[wa9578]

Just tried your code but it does exactly what you were saying about opening the picture, how do you make it so the gallery is still there? or is that what you were saying? get rid of the gallery, redirect it to a specific page and create like a css gallery on there?

Sorry am just trying to get my head around it, thanks for your patience

[Fotiman]

It should not be opening the picture in the link unless your onclick handler is encountering an error before it can return false. Do you maybe have a typo?

You might be able to debug this using Firebug + Firefox. Set the href value (temporarily) to "#" so it doesn't move away from the page, then click on the link. If there's an error somewhere, you'll probably see it in the Firebug console.

[wa9578]

I copied and pasted your codes in...

I put the links in with the links, and the script in just before the </body> like your example :s

[wa9578]

cancel my last found the error and its working now :) thanks for your help fotiman, would I be right in thinking if I wanted to add more just do the same things again...

like add another

<li><a href="2JacksonHouseExterior.jpg" onclick="locationViewer.show(0);return false;">Location</a></li> (changing the hrefs and var name)

and then adding the;

var editnameViewer = new PhotoViewer();
editnameViewer.add("imgurl");

[Fotiman]

Yup, that would be it. :)

[wa9578]

Thanks Fotiman your a star, I'll create a css photo gallery on the error page so that those without js enabled can still see something even if its not as good (imo).

Thanks again

[wa9578]

Another quick one for anyone that might be able to help :S

Since adding the coding above, one of the css rules doesn't apply itself anymore (basically a red line underneath the drop down names (students, locations))

It still works for the other drop down menus before and after it but not for this particular one?

[Fotiman]

Which browser? If you have Firefox with Firebug, you can inspect the element to see what styles are being applied. Chrome Developer Tools and IE Developer Toolbar also have this functionality (but Firebug is still the easiest to use, IMO).

[wa9578]

Have installed it, please forgive my ignorance but how do you use it :s

Have looked at my pages and selected the bits to look at but the coding seems to be the same as the other bits

[Fotiman]

With Firebug installed, you'll see a little icon in the bottom right of the Firefox window. Clicking on that will open Firebug. You may need to enable it for the page or just reload the page once you've opened Firebug. In the top left of the Firebug window is a little icon that looks like a mouse pointer in a rectangle. Click that to enable the inspector by clicking on an element in the page. So click that, then find the item that is missing the style you expect, and click on it. In the right pane of Firebug you will see a Style tab. This is where you can see which styles are being applied.

[wa9578]

Cheers Foti I was trying to fiddle with it and had watched the video but still not got far. I've found the issue now. The code wasn't quite the same as the other headings in the drop down thing have the class "name" however the coding for the photoalbum (none JS enabled) didn't so therefore the rule didn't apply.

Thanks again for your patience and all your help

[Fotiman]

Glad you got it working. :)