Help with clickable images in BFSlider

Vfxdude » BigFeature

Help with clickable images in BFSlider

(7 posts) (2 voices)

Started 7 months ago by usurper
Latest reply from usurper

Tags:

bfslider

usurper
Member
I'm having an issue with a clickable images in sliders. I'm sure this is more of an issue with my coding skills than BF, though.

Here's the website in question: http://www.propelics.com

I have 4 'page' sliders, set to No Sidebar. They're children of a published "sliders" page. I built these images in Photoshop, then used the Slice Tool to create link areas. They're all the same size, 848x350.

First, here's my BFSlider code:
[bfslider name="slides" type="page" height="350" buttons="style2" pause="15000" animation="fade"]

I first built those slider pages as html table type of thing (standard output of photoshop). This worked great in Firefox, Chrome, Safari, but is broken in IE. Here's the code:

`<table id="Table_01" width="848" height="350" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"> <img src="http://www.propelics.com/wp-content/uploads/2011/10/Slider-4_01.png" width="848" height="210" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="http://www.propelics.com/wp-content/uploads/2011/10/Slider-4_02.png" width="457" height="140" alt=""></td> <td>
```
[/code]
etc...
But it produced this output in IE:
http://grabup.teamhim.com/c9298399-8f0e-4df3-b98b-c2a89aa583e6.png

Next I created the same thing in CSS.  This is just the Photoshop output of CSS.  I don't know what I'm doing, but here's the code:
[code]
```
<div style="position:absolute; left:0px; top:0px; width:848px; height:350px;"> <div style="position:absolute; left:0px; top:0px; width:848px; height:210px;"> <img src="http://www.propelics.com/wp-content/uploads/2011/10/Slider-4_01.png" width="848" height="210" alt=""> </div> <div style="position:absolute; left:0px; top:210px; width:457px; height:140px;"> <img src="http://www.propelics.com/wp-content/uploads/2011/10/Slider-4_02.png" width="457" height="140" alt="">`etc....

This produces working sliders on Firefox, Chrome, Safari, and IE. However, it breaks the fade animation, and the sliding animation doesn't work at all. For the fade, if you watch it, it does a smooth transition from slider 1 to 2, then flashes slider 1 again before going to slider 3. It flashes slider 1 again before going to slider 4. You can see this currently on the site as it is today.

I'm sure this is something simple, but can anyone point out what I'm breaking here? I'm not sure if this is even the right way to perform this task, but it does look quite good. Any and all help would be greatly appreciated!
Posted 7 months ago #
usurper
Member

I've tried to use a static image and overlay text links with a simple <div> with an absolute position. This doesn't work as when the page loads, all Divs are shown at once for all 4 sliders - then after the slider changes it shows just the correct one.

I've tried to add a static image and add a client-side image map, but it looks like it just loads the last image map and ignores the previous ones, so that won't work.

I think it's just the bfslider code not built for this.

I don't see how to add an image map or positional html text links with nivoslider, so I'm officially out of ideas here.

Btw, in the above message, if I set the fade speed to "0", the 1st slider doesn't flash. That's how I have the site now just so it looks good.

Posted 7 months ago #
vfxdude
admin

it's not built for this would be the easy answer, but when testing you slider in IE (ver 7-9) I don't get that problem in you screenshot though. For the transition test with slide instead of fade.

I haven't tested this, but you can try to -margin the links (it doesn't need to be images then) into place instead of using absolute positioning (and add the one image for the whole slider). Ex. .sliderlink1 { margin-top: -200px }

Posted 7 months ago #
usurper
Member

Thanks for the reply, vfx.

I tried the margin-top, and it does display the text correctly. However, when the slide changes, the previous slide's text goes to the "new" position, then the text changes to the new text. So it's a little wonky.

The testing you did with 7-9 now is working because I set the fade to 0 and am using div style code as shown above. This seems to work across all browsers, things only get goofy when I add the fade time in there. I'll leave it as is for now.

Posted 7 months ago #
vfxdude
admin

ok. image map should work though.

Posted 7 months ago #
usurper
Member

I thought so too, but I tested it with 2 sliders, each with a different image map.

When I loaded 'em, the image map was stuck on the 2nd slider. Like it loaded the images and used the last image map. Unless you know of some html code to wipe or reset the image map after the next slider loads.

vfx, can you try it out on your end? Or is there another slider functionality I can use other than bfslider that supports image maps?

Thank you!

Posted 7 months ago #
usurper
Member

:)

Well that was dumb. I was using the same imagemap name in all 4 sliders. Once I changed that it worked with image maps. Duh!

Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.