PDA

View Full Version : wowslider help



jaimed
09-14-2013, 09:02 PM
I saw that there are some really sharp coders here, and am hoping for some help.

I am using Wowslider 4.4 and have been able to get everything I'd like except for two things:
1) I'd like to put text under each thumbnail image that is associated with that slide, like they do on yahoo.com.
2) I'd like to place the prev and next images to the left and right of the thumbs, also like they do on yahoo.

Anyone up for this?
You would earn my sincere gratitude!

thanks!

jscheuer1
09-15-2013, 03:13 AM
Please include a link to the page on your site that contains the problematic code so we can check it out.

james438
09-15-2013, 03:42 AM
I just tried it out and it is an interesting little script. You may be able to get better help from their faq (http://wowslider.com/faq.html) or by contacting them directly. They also have a number of questions and answers that you can look over, but I didn't see a search option for all of their questions when I was looking at their site. As of yesterday, 9/13/13, the latest version is 4.5.

The answer to your second question appears to be found here:

http://wowslider.com/rq/move-jquery-fading-slideshow-arrows-1o.html

For your first question, could you post a link to the page that demonstrates what you are trying to accomplish?

jaimed
09-15-2013, 03:33 PM
The answer to your second question appears to be found here:

http://wowslider.com/rq/move-jquery-fading-slideshow-arrows-1o.html



Thanks James.
I saw that and tried a few things, but the arrows move down over the thumbs (or under depending on z) and I can't find a way to place them left and right of the thumbs.

A VERY preliminary concept is here: http://ifs-de.com/dev/

james438
09-16-2013, 02:39 AM
This is a rather weak area for me, but in http://ifs-de.com/dev/css/engine1/style.css try changing


#wowslider-container1 .ws_thumbs {
bottom: -98px;
left: 0;
width:100%;
height:93px;
}
to

#wowslider-container1 .ws_thumbs {
bottom: -98px;
left: 50px;
width:84%;
height:93px;
}

more probably has to be done, but this may help.

Could you post a link to the yahoo site you were talking about that accomplished the text for the thumbnails that you were having trouble with so we can see what you are trying to do?

jaimed
09-16-2013, 12:51 PM
Could you post a link to the yahoo site you were talking about that accomplished the text for the thumbnails that you were having trouble with so we can see what you are trying to do?

The main yahoo page(http://www.yahoo.com/) has a slider with thumbs, and right under the thumbs are short text descriptions.
I have tried simply adding text to the thumb list, but that didn't work. I'm thinking I have to find where the thumb divs are being created and try to append another div to each one, but this is kind if beyond me...

jaimed
09-16-2013, 01:30 PM
This is a rather weak area for me, but in http://ifs-de.com/dev/css/engine1/style.css try changing


#wowslider-container1 .ws_thumbs {
bottom: -98px;
left: 0;
width:100%;
height:93px;
}
to

#wowslider-container1 .ws_thumbs {
bottom: -98px;
left: 50px;
width:84%;
height:93px;
}



This has promise; thanks! Just need to play with the image size and position, but could work!

james438
09-16-2013, 04:34 PM
oh, it was yahoo.com itself. As for the text under the thumbnail request, I'm afraid that is beyond me. Have you tried contacting wowslider with that one? Someone here may still be able to figure that one out though.

jscheuer1
09-16-2013, 05:31 PM
You can put spans in there, ex:


<a href='#' title='Health is good for you'><img src='Graphics/thumbs/1378761014_photo_health.jpg' alt='Health is good for you' />
<span>Health is good for you</span>
</a>

But getting them to show up would be a matter of css. They do survive the transformation into the slider's nav buttons. But the css style for the a tag and the two divs holding the a tags in the slider nav there is such that you cannot see them.

When I have more time, I will look into it further.

jaimed
09-16-2013, 09:44 PM
oh, it was yahoo.com itself. As for the text under the thumbnail request, I'm afraid that is beyond me. Have you tried contacting wowslider with that one? Someone here may still be able to figure that one out though.

Thanks for trying (and for the css help)!

jaimed
09-16-2013, 09:46 PM
When I have more time, I will look into it further.

Thanks!

jaimed
09-18-2013, 11:53 AM
When I have more time, I will look into it further.

Just to make this more challenging, this is the response I got when I contacted wowslider about it:
"Unfortunately, it's impossible with WOWslider application."

mlegg
09-18-2013, 03:55 PM
can you ditch WOWslider and try something else. I've used this and it works well
http://bxslider.com/

jaimed
10-02-2013, 12:46 PM
When I have more time, I will look into it further.

Hi John.

I have done all I can do to find a work-around for this. So far, my only solution is to re-create the thumbnail images with text over-layed onto them, which works but isn't ideal.
Any chance you found some "spare" time to look into this?

- steve

jscheuer1
10-02-2013, 02:05 PM
I had taken a closer look at it, and though "impossible" isn't how I would put it, that's a pretty fair representation of the situation. As mentioned, the a tags themselves and their containers are styled in such a manner that you cannot easily get these spans I inserted to show up. I was eventually able to get them to show up. But I couldn't get them to present themselves below the thumbnails without distorting the vertical alignment of the thumb/description combos. To even get that I had to use a table, which then (because there was now only one element that was a direct child of the thumbnail container) made the navigation always go to the first slide.

I just reopened the file I was using to storyboard this on and now I see that the thumbnail images are missing. It's hard to hit a moving target.

I was hoping you might take mlegg up on his suggestion that you try a different slider. His suggestion of:

http://bxslider.com/

seems like a good script. Perhaps it can be more easily adapted.

And, since the only transition you seem to be using in the slider is the fade transition, it would probably be easier to take a more ordinary script like The Ultimate Fade-in Slideshow and adapt it with thumbnails (I already have the code for that) in another script like Text and Image Crawler.

I'm curious, those little [more] links in the slider - are they part of the WOW slider script or do they use another script? In the scenario I'm thinking of they would have to use another script, like Pretty Photo or FancyBox.

jaimed
10-02-2013, 04:29 PM
Sounds like you are having the same issues I had.
The reason I liked this slider is in the way it wrote the modal windows and allowed me to create the popups.
Took a little bit of php to populate them, but they work well.
However, I will look into the bxslider, or try to convince the client to go with thumbs that have text overwritten onto them.

Thanks for your help!

- steve

jaimed
10-02-2013, 04:40 PM
I'm curious, those little [more] links in the slider - are they part of the WOW slider script or do they use another script? In the scenario I'm thinking of they would have to use another script, like Pretty Photo or FancyBox.

Think I got this part wrong...

I am using http://vast-eng.github.io/jquery-popup-overlay/ to handle the pop-ups.

jscheuer1
10-02-2013, 05:43 PM
Right, well you could still use that then. Ufade allows for descriptions, which can be always on and configured to look like the descriptions with links that you have, one for each slide, with a more link for each.

Two things are concerning me in what will be done if we use my most recent idea:


The amount of work to set it up


How much of the problem with the thumbnails' layout is WOW slider and how much is the page layout around it


Oh and I just had the thought Ufade will not work if the content is more than one image and one description for each item.

I'm thinking too, I recently wrote my own slider that might work well with this. It already has circle nav that could be easily changed to anything - like thumbnails with descriptions beneath them, and the content can be text and/or images. It fades or slides.

You never know for sure what will happen when you start working on something like this. But it seems pretty clear that using a different slider will take a bit of time to work out.