I am using ImageFlow for making an image slider. I want to use <div>s instead of images for slides. How can I do it?
Using s as slides instead of images in ImageFlow Slider
Asked
Active
Viewed 679 times
4
-
Why you want to do replace image with div ?
– anam
May 21 '13 at 06:28
-
5
Better add your code fiddle instead of demo page
– Sowmya
May 21 '13 at 06:29
-
i wish to show description on top of images ,in actual code we can not wrap div around img tag ...
– KhAn SaAb
May 21 '13 at 06:30
-
http://alpha.probytes.net/imageSlider/ this is my code and i want to replace image with div
– KhAn SaAb
May 21 '13 at 06:34
-
yes i want to use same slider ..
– KhAn SaAb
May 21 '13 at 06:42
-
1
will you show your code in jsfiddle?
– wm.p1us
May 21 '13 at 06:48
-
tried making Fiddle but its not working in Fiddle
– KhAn SaAb
May 21 '13 at 06:56
-
@ wm.p1us code in Fiddle http://jsfiddle.net/simmi_simmi123/LP53F/
– KhAn SaAb
May 21 '13 at 07:15
-
1
Instead of a div, you can try an img element with an empty source attribute, but with the alt attribute containing the text you want displayed.
– Geoffrey
May 21 '13 at 07:25
-
1
@systemovich empty sorce will show text only . I want to display Text on top of Image tag .. i am not able to wrap img tag with div because they way js file has written we cant not wrap,append img with div tag.
– KhAn SaAb
May 21 '13 at 07:33
-
@systemovich hey u suggested using empty src , i wanted to now if i can load another image using alt ... i know it sounds stupid but i want to Flip Effect on image so i am thinking first shoing alt then Flip method with setting image src attribute
– KhAn SaAb
May 21 '13 at 08:32
1 Answers
0
I checked out your link from the comments - you write that you can't edit the actual code to wrap a div around each individual img.
Are you trying to change the way the gallery works so that instead of inputing img you can simply insert divs and have the slider js still work?
I took the HTML below from the link you posted earlier :
<div id="myImageFlow" class="imageflow" style="visibility: visible; height: 517px; "><img src="img/9_comtech_o.jpg" id="id11" height="360" width="300" longdesc="img/img11.png" alt="img11"><img src="img/8_psabuilding.jpg" id="id9" height="360" width="300" longdesc="img/img9.png" alt="img9"><img src="img/7_mbc.jpg" id="id7" height="360" width="300" longdesc="img/img7.png" alt="img7"><img src="img/5_lighthouse.jpg" id="id5" height="360" width="300" longdesc="img/img5.png" alt="img5"><img src="img/2_harbourfront3.jpg" id="id3" height="360" width="300" longdesc="img/img3.png" alt="img3"><img src="img/1_bankofamerica.jpg" id="id1" height="360" width="300" longdesc="img/img1.png" alt="img1">
This is what I would do if I wanted the js to accept divs instead of imgs:
<div id="id1"><img id="id1" /></div>
You may need to change the way the CSS/js reacts to #myImageFlow.
gersande
- 465
- 1
- 8
- 25
-
yes i tried adding div around img tag .. but its not working js file need to updates to wrap image around div.. but i am not able to update js file
– KhAn SaAb
May 21 '13 at 07:13
-
@NK123, does that mean you do not have permission to modify the js file?
– Geoffrey
May 21 '13 at 07:17
-
Well then I honestly can't think of a way unless you create a div class for text (which in the html file would not be in the #myImageFlow div but somewhere else) that with css positions itself right underneath its accompanying img #id - but that seems like it would be a huge pain in the ass to get right and to keep straight.
– gersande
May 21 '13 at 07:18
Asked
Active
Viewed 679 times
4
-
Why you want to do replace image with div ? – anam May 21 '13 at 06:28
-
5Better add your code fiddle instead of demo page – Sowmya May 21 '13 at 06:29
-
i wish to show description on top of images ,in actual code we can not wrap div around img tag ... – KhAn SaAb May 21 '13 at 06:30
-
http://alpha.probytes.net/imageSlider/ this is my code and i want to replace image with div – KhAn SaAb May 21 '13 at 06:34
-
yes i want to use same slider .. – KhAn SaAb May 21 '13 at 06:42
-
1will you show your code in jsfiddle? – wm.p1us May 21 '13 at 06:48
-
tried making Fiddle but its not working in Fiddle – KhAn SaAb May 21 '13 at 06:56
-
@ wm.p1us code in Fiddle http://jsfiddle.net/simmi_simmi123/LP53F/ – KhAn SaAb May 21 '13 at 07:15
-
1Instead of a div, you can try an img element with an empty source attribute, but with the alt attribute containing the text you want displayed. – Geoffrey May 21 '13 at 07:25
-
1@systemovich empty sorce will show text only . I want to display Text on top of Image tag .. i am not able to wrap img tag with div because they way js file has written we cant not wrap,append img with div tag. – KhAn SaAb May 21 '13 at 07:33
-
@systemovich hey u suggested using empty src , i wanted to now if i can load another image using alt ... i know it sounds stupid but i want to Flip Effect on image so i am thinking first shoing alt then Flip method with setting image src attribute – KhAn SaAb May 21 '13 at 08:32
1 Answers
0
I checked out your link from the comments - you write that you can't edit the actual code to wrap a div around each individual img. Are you trying to change the way the gallery works so that instead of inputing img you can simply insert divs and have the slider js still work?
I took the HTML below from the link you posted earlier :
<div id="myImageFlow" class="imageflow" style="visibility: visible; height: 517px; "><img src="img/9_comtech_o.jpg" id="id11" height="360" width="300" longdesc="img/img11.png" alt="img11"><img src="img/8_psabuilding.jpg" id="id9" height="360" width="300" longdesc="img/img9.png" alt="img9"><img src="img/7_mbc.jpg" id="id7" height="360" width="300" longdesc="img/img7.png" alt="img7"><img src="img/5_lighthouse.jpg" id="id5" height="360" width="300" longdesc="img/img5.png" alt="img5"><img src="img/2_harbourfront3.jpg" id="id3" height="360" width="300" longdesc="img/img3.png" alt="img3"><img src="img/1_bankofamerica.jpg" id="id1" height="360" width="300" longdesc="img/img1.png" alt="img1">
This is what I would do if I wanted the js to accept divs instead of imgs:
<div id="id1"><img id="id1" /></div>
You may need to change the way the CSS/js reacts to #myImageFlow.
gersande
- 465
- 1
- 8
- 25
-
yes i tried adding div around img tag .. but its not working js file need to updates to wrap image around div.. but i am not able to update js file – KhAn SaAb May 21 '13 at 07:13
-
@NK123, does that mean you do not have permission to modify the js file? – Geoffrey May 21 '13 at 07:17
-
Well then I honestly can't think of a way unless you create a div class for text (which in the html file would not be in the #myImageFlow div but somewhere else) that with css positions itself right underneath its accompanying img #id - but that seems like it would be a huge pain in the ass to get right and to keep straight. – gersande May 21 '13 at 07:18