WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => jQuery => Topic started by: tux-flo 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
-
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?
-
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 (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:
<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:
<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 (http://www.feuerwehr-leer.de/?seite=fahrzeuge) is something like that realised with an other CMS.
-
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.
-
Ok this is done. I have removed the line from the template and the other jquery plugins (they were just for testing)
-
There's still some scrap left:
Fehler: $(".colorbox").colorbox is not a function
Quelldatei: http://www.feuerwehr-hainichen.de/seiten/technik.php
Zeile: 45
-
Ok I have also removed this... it was in the default.jquery preset.
-
Works now. It's a bit inconspicuous, but you said the black thingy is for testing only. ;)
-
yes, but my question was: can i realize the slide via mouseover like in the upper picture
-
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):
$(document).ready(function() {
$("div.slide").hover(function () {
$(this).hide("slide", { direction: "up" }, 1000),
$(this).show("slide", { direction: "down" }, 1000)
});
});
-
so after trying out a lot of variants, I finally get it to work.
So here is the code I used:
<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!