PDA

View Full Version : Trying to have a Featured Content Slider Code made that it highly customizable



Lady Rogue
10-25-2012, 06:42 PM
I have been messing around with various codes trying to find something that I like. When I stumbled across this image http://i801.photobucket.com/albums/yy291/Lady_Roguepics/e53fcfa7938a1c63dd2610079a6b169741d7f550_large.jpg. The only problem is that it is a wordpress plugin. Is there anyway that someone can make a slider simular to it and how much would it cost?

ajfmrf
10-26-2012, 01:36 PM
try here

http://css-tricks.com/examples/AnythingSlider/#&panel1-1

Lady Rogue
10-26-2012, 07:45 PM
I checked out the link and I think it would be good, but the truth is... I was hoping for something a little more easier to understand like they do it here. I don't even know where to begin with all that. Also, I was hoping to have the scroll thumbnails underneath as well, didn't see the option. I appreciate the link, but I don't think that is what I am looking for.

jscheuer1
10-26-2012, 10:04 PM
For 50 to 100 dollars I can set something like that up for you using the Content Slider if you're interested. However, tropical storm Sandy is headed right toward my region at the moment and forecasters are saying it will combine with the jet stream to produce an intense and disruptive storm the likes of which we haven't seen here in decades. If they're right it may take me a little while to get to this project.

If you want me to get started, send at least $25.00 US to:

http://home.comcast.net/~jscheuer1/side/donate.htm

Lady Rogue
10-27-2012, 07:15 PM
Thank you, I sent you $25 via paypal. :)

jscheuer1
10-28-2012, 08:37 PM
Thank you, I sent you $25 via paypal. :)

Thank you, I got it. Like I said, I'm a little busy getting ready for the storm and have no idea what will happen when it gets here. Hopefully my area will be spared the brunt, it often is.

Anyways, just to be clear here, you want a content slider like feature as like the bottom of that image from your post. and for the top it's to feature one of the visible items from the slider in more detail, right?

If so, when does this happen? It can't really be when the content slides, as more than one item is visible at a time there. I would think that in addition to the content sliding, there would be a highlight of each visible item in it in turn for about 3 seconds each, that's when its detail would appear, unless you clicked on one of them, then its detail would be the detail shown. Then what happens? Does the slider resume after - say a 6 second pause, and/or is there a resume button to get things moving again?

Like the content slides every 9 seconds, showing three items that progressively highlight every 3 seconds until it's time to slide again, unless someone clicks on something. What should happen if they click on the detail? I would think that should either do nothing, or take them to another page with even more detail on that particular item. Sound good?

Speaking of which, do you have any content? This would be easier to lay out if I had some content to work with.

Lady Rogue
10-28-2012, 10:20 PM
I am hoping to get something pretty much simular to this: http://preview.wp-themix.org/plugins/front-slider/ . The only reason I don't use that is because it seems to be designed for wordpress. I don't have wordpress. I am hoping to go independent of it.

jscheuer1
10-29-2012, 02:33 AM
OK, with that setup the bottom part doesn't move at all without user interaction. As the page opens the top part is cycling automatically with highlighting in the bottom of which item is being detailed in the top. When highlighting moves beyond what's visible in the bottom, the user cannot see the highlighting or the active thumbnail unless they manually advance the bottom part. Once the user interacts by clicking on an item in the bottom part, that item is detailed in the top, the automatic motion stops and cannot be restarted unless the page is reloaded. If at any time the user clicks on the detailed content in the top, they are taken to another page, one that the detailed content in the top was describing. The only interplay between top and bottom is that items detailed in the the top are highlighted in the bottom and clicking on an item in the bottom puts that thumbnail's details into the top. The only automatic motion is that of the details rotating in the top until a thumbnail in the bottom is clicked, at which point that stops. The only other user interaction is hovering over the left and right arrows to manually move the bottom part. Doing that has no effect upon the top part.

That seems fairly easy to do.

Lady Rogue
10-29-2012, 11:36 PM
Fantastic. :) Storm of the decade permitted of course. Stay safe.

jscheuer1
10-30-2012, 04:14 AM
I've been busy getting ready but for now the power is still on. I've also found time to get started with this project. The slider itself does all of those things except for animating the thumbnails onmouseover of arrows. But the transitions in the detail area aren't as smooth or fancy. I plan on using jQuery both to allow for the scrolling of the thumbnails and to smooth out and enhance the transitions in the detail area.

Lady Rogue
10-30-2012, 03:17 PM
I've been busy getting ready but for now the power is still on. I've also found time to get started with this project. The slider itself does all of those things except for animating the thumbnails onmouseover of arrows. But the transitions in the detail area aren't as smooth or fancy. I plan on using jQuery both to allow for the scrolling of the thumbnails and to smooth out and enhance the transitions in the detail area.
Sounds like a plan. I am glad that your power didn't go out and that you're safe. I wouldn't wish that on anyone. I am in shock at how much damageit has done.

jscheuer1
11-01-2012, 03:46 AM
Yes we in our immediate area here were very lucky, thanks.

OK, it's done, tested in Chrome IE 8, 9, Firefox, and Opera. To give you an idea, here's the new on page init with added/changed capabilities highlighted:


jQuery(function($){
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 1000], //[true/false, fadeduration] (meaning of second param changed, still added to pausetimr)
slidespeed: 300, //duration of text slide down effect (new) (will be added to pausetime)
autorotate: [true, 3000], //[true/false, pausetime]
linktarget: "_new", //Target for detail links generated from toc links (new)
mouseoverpause: true, //Should auto mode pause on mouseover of detail? (new)
arrows: {left:'#leftarrow', right:'#rightarrow'}, //jQuery selectors for arrow images (new)
thumbspeed: 2500, //Duration of thumbnail slider motion from one end to the other (new)
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
});
});

And a screenshot:
http://home.comcast.net/~jscheuer1/side/content_slider/contentslider.jpg

The CSS and HTML are as well documented/commented as the above init code, and I will be happy to explain anything you don't understand.

To get the actual code and a working demo, please send the balance, $75.00 US to:

http://home.comcast.net/~jscheuer1/side/donate.htm

That will include a reasonable amount of tweaking/support.

Lady Rogue
11-01-2012, 02:59 PM
I sent it. Thank you. I look forward to it.

jscheuer1
11-01-2012, 05:24 PM
Thank You, I will PM you the links. Any questions, ask here.

Lady Rogue
12-23-2012, 12:21 PM
How do I adjust the scroll speed?I am having a problem finding it.

Lady Rogue
02-25-2013, 01:43 PM
Hi, I am back for one quick question. I finally had time to customize this but for some reason when I did I screwed up the slider. Can you show me where I messed it up and how to fix it?

http://www.escapebetweenthepages.com/custom_Nov_1_12/demo_scroll.htm

ajfmrf
02-25-2013, 10:00 PM
Are you refering to the size/shape of thr smaller thumbnails?

ajfmrf
02-25-2013, 11:29 PM
I made a few adjustments to the slider here http://www.web-user.info/test/slider/demo_scroll.htm

But the arrows do not work as far as moving forward or backwards with the images.I have to leave that up to John.I don't know jquery at all.But it does still rotate through the images.

Lady Rogue
02-27-2013, 02:01 PM
I am wondering what I did to make it not scroll anymore. :(

ajfmrf
02-27-2013, 03:05 PM
You need to get with John again? Didn't he do the script for you?

I am sure if he did so it will be an easy fix for him.I like the appearance of the script-nice.

Lady Rogue
02-27-2013, 03:16 PM
Do I keep posting here or message him directly?

jscheuer1
02-27-2013, 04:06 PM
It's nothing to do with jQuery ajfmrf, but it would help to have the original working demo. Even without it, you can see in the current extendedslider.css file, around line #79:


#paginate-slider4 {
background-color: 101010;
black-space: nowrap; /* leave as is */
position: absolute; /* leave as is */
left: 0; /* leave as is */
top: 0; /* leave as is */
}


That's invalid. In the original, it's:


#paginate-slider4 {
background-color: 101010;
white-space: nowrap; /* leave as is */
position: absolute; /* leave as is */
left: 0; /* leave as is */
top: 0; /* leave as is */
}

Lady Rogue, the word white here has nothing to do with color. It means the space between inline elements and characters. Without it the slider has nowhere to slide to because its overflow has wrapped. Just changing that back (it is marked - /* leave as is */) will fix the slider arrows. I also see above that.


background-color: 101010;

101010 isn't a valid color. If you want that color, it needs to be:


background-color: #101010;

You have that in one other place around line #17 (add the red if you really want that color):


.sliderwrapper .contentdiv {
visibility: hidden; /* leave as is */
position: absolute; /* leave as is */
left: 0; /* leave as is */
top: 0; /* leave as is */
padding: 5px;
background: #101010;
width: 485px; /* width of content DIVs within slider. Total width should equal slider's inner width (490+5+5=500) */
height: 100%;

}

There could also be other css errors. You can validate your css:

http://jigsaw.w3.org/css-validator/

But sometimes correcting something that's invalid makes it do something you don't want. It helps to have a good knowledge of css and when in doubt consult a good css resource. I like:

http://www.blooberry.com/indexdot/css/propindex/all.htm

That's for properties, they also have good info on selectors:

http://www.blooberry.com/indexdot/css/syntax/selectors/selectors.htm

All their css info can be accessed from:

http://www.blooberry.com/indexdot/css/index.html

It's a little out of date (no CSS 3 yet, which is good in a way, the CSS 2 stuff they have works in almost all browsers. CSS 3 is still a little sketchy), but there are others, and you can usually Google the individual property name if it's a valid one. That's what I do if it's CSS 3.

jscheuer1
09-25-2013, 03:25 PM
As this thread has been open for some time with no activity, I'm closing it. If you have more questions, please start a new thread.