Help!!!!!!

  • 1
  • Problem
  • Updated 7 years ago
  • Solved
Hello! I've just started to create my website, but I'm having problems with my photographs. How do I add a photograph and have the title show when the mouse hovers over it? I also want people to be able to click on it and then make it bigger - please help :-)
Photo of Kirsty

Kirsty

  • 4 Posts
  • 0 Reply Likes
  • confused

Posted 7 years ago

  • 1
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Do you mean something like This Kirsty? If so, I would be glad to assist you in adding the widget to your site. Otherwise, please specify your needs.

Kevin
Photo of Kirsty

Kirsty

  • 4 Posts
  • 0 Reply Likes
Yay Kevin!! That's exactly what I mean :-) Can you show me how to do it please?
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Kirsty, first insert a html widget at the top of the page and put in this code:

<!--
<link rel="stylesheet" type="text/css" href="http://dev.herr-schuessler.de/jquery/..." media="screen" />
<link rel="stylesheet" type="text/css" href="http://dev.herr-schuessler.de/jquery/..." media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/...>
<script type="text/javascript" src="http://dev.herr-schuessler.de/jquery/...>
<script type="text/javascript">
$(document).ready(function () {
$(".ppy").popeye();
});
</script>
-->

Then, add this code to a html widget placed at the placed at the place you want the gallery:

<!--
<div class="ppy">
<ul class="ppy-imglist">
<li><a href="resources/image.png"><img src="resources/image.png" /></a></li>

</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-nav">
<a class="ppy-next" title="Next image">Next image</a>
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
<a class="ppy-switch-compact" title="Close">Close</a>
</div>
</div>
</div>
-->


Please replace image.png with the file name of your image. To make a gallery, just keep adding:
<!--
<li><a href="resources/image.png"><img src="resources/image.png" /></a></li>
-->
after the one that is already there a desired number of times.

P.S, please ignore the <!-- and --> as they are comment tags that prevent the forum from actually applying the code.

Sincerely,
Kevin
Photo of Kirsty

Kirsty

  • 4 Posts
  • 0 Reply Likes
Hi Kevin,

Thanks for your help with this - I'll try it and hopefully it will work :-)

Thanks again :-)

Kirsty
Photo of Kirsty

Kirsty

  • 4 Posts
  • 0 Reply Likes
Hi Kevin,

Sorry - am completely thrown by this!!! Not sure how to do it :-(
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Kevin
I've followed this thread and inserted the code as per your instructions on this page

http://www.leathersolutions.org/test.php

but nothing shows up, please could you take a look. Could you also explain how to change the border and caption background colour and the caption text. I'm using ff5
Thanks
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
hmmm.... I think it's the stylesheet not working properly. I don't know what's going on.

Kevin