Slide effect [solved]

[tux-flo]

Hi!
I'm creating a homepage for our local volunteer fire department. They asked me if I can do something like that:
a Picture of the Department with the 5 gates, and if you're moving your mouse over one gate, the gate should "go up" and you see the car behind the gate. I want to realize this with an image of the closed gate over the department picture with the open gate.
I thought this is easy with jquery, but I don't find a solution.
I tested a standard mouse over, and it works, but now I want to use a slide effect with this, and it does not work.
I tested the "Slide" effect from jquery and added class="slide" to the picture, but it only works on klicking the image, and it is upsidedown (it slides from up to down and I want it down to up)
I'm new with creating websites, WebsiteBaker and jquery so excuse me if I ask to stupid questions.

Greetings from Germany
Flo

[BlackBird]

Well, this should be easy, but as always, all is easy if you know how.

First, how did you include jQuery and the Slide plugin? Directly in the template, using jQueryAdmin, other way? Can we take a look at the page somewhere to see it in action?

[tux-flo]

My Problem is, that I actually not have the real images of the department, so I don't can show you an example with the gates.
But I have created examples to show you what I mean. Here is the link:
http://www.feuerwehr-hainichen.de/seiten/technik.php
The first image is the one with the mouseover. (I just used the black image to simulate the closed gate image)
Here is the code I used for this:

Code: [Select]

<div style="position:relative; top:360px; left:259px; z-index:2;">
<a
onmouseover="austausch1.src='http://www.feuerwehr-hainichen.de/medien/elwklein.jpg';" onmouseout="austausch1.src='http://www.feuerwehr-hainichen.de/medien/zu.jpg';" href="">
 <img border="0" width="71" height="60" name="austausch1" alt="" src="http://www.feuerwehr-hainichen.de/medien/zu.jpg" />
</a>
</div>
<div style="position:relative; top:0px; left:0px; z-index:1;">
<img width="700" height="500" alt="" src="http://www.feuerwehr-hainichen.de/medien/Geraetehaus/Bild%20028.jpg" />
</div>

The second image is the one with the slide effect. And here is the code for this:

Code: [Select]

<div class="slide" style="position:relative; top:360px; left:259px; z-index:2;">
 
<img src="http://www.feuerwehr-hainichen.de/medien/zu.jpg"
border="0" width="71"height="60"
name="austausch1">
</div>
<div style="position:relative; top:0px; left:0px; z-index:1;">
  <img src="http://www.feuerwehr-hainichen.de/medien/Geraetehaus/Bild%20028.jpg" width="700" height="500" alt="">
</div>
I included the slide effect with jquery admin (default.jquery), and I wrote [[jQueryInclude]] in the footer in the options menu.
On the Website http://www.feuerwehr-leer.de/?seite=fahrzeuge is something like that realised with an other CMS.
 

[BlackBird]

The jQuery Core is included twice: By jQueryAdmin and by the template. So you may try to remove the line from the template as a first step:

 <script type="text/javascript" src="http://www.feuerwehr-hainichen.de/templates/FFWneuesIcon6/js/jquery.min.js"></script>

Next, you've included lots of Plugins and Effects. Try to remove them all just leaving the Slide in place.

[tux-flo]

Ok this is done. I have removed the line from the template and the other jquery plugins (they were just for testing)

[BlackBird]

There's still some scrap left:
Fehler: $(".colorbox").colorbox is not a function
Quelldatei: http://www.feuerwehr-hainichen.de/seiten/technik.php
Zeile: 45

[tux-flo]

Ok I have also removed this... it was in the default.jquery preset.

[BlackBird]

Works now. It's a bit inconspicuous, but you said the black thingy is for testing only.

[tux-flo]

yes, but my question was: can i realize the slide via mouseover like in the upper picture

[BlackBird]

You have bound the effect to the 'onclick'-event, so it is only executed - on click. You can also bind it to the mouseover-event using hover().

http://api.jquery.com/hover/

Try (untested):

Code: [Select]

$(document).ready(function() {
  $("div.slide").hover(function () {
    $(this).hide("slide", { direction: "up" }, 1000),
    $(this).show("slide", { direction: "down" }, 1000)
  });
});



[tux-flo]

so after trying out a lot of variants, I finally get it to work.
So here is the code I used:

Code: [Select]

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('div.hover_block p').hover(function(){
$(this).find('img').slideToggle(1000);

}, function(){
$(this).find('img').slideToggle(1000);

});
});
</script>
<style media="screen">


div.hover_block p{



width:50px; position: relative; top:-215px; left:250px;
                        height: 50px;
                        z-index:2;

}


div.hover_block p a { text-decoration: none;  opacity: 0.0; }

div.hover_block p img {
position: absolute;  top:-215px; left:250px;
top: 0;
left: 0;
border: 0;
                        z-index:2;
}
</style>
</head>

<body>
<div class="hover_block">
<p><img src="ihttp://www.feuerwehr-hainichen.de/medien/zu.jpg" alt="" width="50" height="50" /> </a></p>

</div>

</body>
</html>


Thanks a lot for your help!