Author Topic: Slide effect [solved]  (Read 11953 times)

Offline tux-flo

  • Posts: 6
  • Gender: Male
    • My Blog
Slide effect [solved]
« on: January 24, 2011, 12:51:48 PM »
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
« Last Edit: January 29, 2011, 01:06:10 PM by tux-flo »

Offline BlackBird

  • Posts: 2573
Re: Slide effect
« Reply #1 on: January 25, 2011, 09:41:50 AM »
Well, this should be easy, but as always, all is easy if you know how. :-D

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?

Offline tux-flo

  • Posts: 6
  • Gender: Male
    • My Blog
Re: Slide effect
« Reply #2 on: January 25, 2011, 11:51:50 AM »
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.
 

Offline BlackBird

  • Posts: 2573
Re: Slide effect
« Reply #3 on: January 25, 2011, 01:34:14 PM »
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.

Offline tux-flo

  • Posts: 6
  • Gender: Male
    • My Blog
Re: Slide effect
« Reply #4 on: January 25, 2011, 01:43:07 PM »
Ok this is done. I have removed the line from the template and the other jquery plugins (they were just for testing)

Offline BlackBird

  • Posts: 2573
Re: Slide effect
« Reply #5 on: January 25, 2011, 01:53:07 PM »
There's still some scrap left:
Fehler: $(".colorbox").colorbox is not a function
Quelldatei: http://www.feuerwehr-hainichen.de/seiten/technik.php
Zeile: 45

Offline tux-flo

  • Posts: 6
  • Gender: Male
    • My Blog
Re: Slide effect
« Reply #6 on: January 25, 2011, 02:04:50 PM »
Ok I have also removed this... it was in the default.jquery preset.

Offline BlackBird

  • Posts: 2573
Re: Slide effect
« Reply #7 on: January 25, 2011, 02:33:30 PM »
Works now. It's a bit inconspicuous, but you said the black thingy is for testing only. ;)

Offline tux-flo

  • Posts: 6
  • Gender: Male
    • My Blog
Re: Slide effect
« Reply #8 on: January 25, 2011, 02:51:09 PM »
yes, but my question was: can i realize the slide via mouseover like in the upper picture

Offline BlackBird

  • Posts: 2573
Re: Slide effect
« Reply #9 on: January 25, 2011, 03:32:35 PM »
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)
  });
});


Offline tux-flo

  • Posts: 6
  • Gender: Male
    • My Blog
Re: Slide effect
« Reply #10 on: January 29, 2011, 01:01:16 PM »
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!
« Last Edit: January 29, 2011, 01:06:40 PM by tux-flo »