Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Is this possible to achieve this with CSS3 and jquery?

    • This is for Digital Display Signage•
    I am a new programmer. I'm definitively not a good one. But in your Posting Rules and Guidelines it states "this web forum has been listed recently as a helpful resource to some students who are just learning HTML. " That is definitively me. I'm not looking for anyone to do the actual work for me, I do want to learn this but I'm struggling trying to figure out how to fit in all these elements. If its even possible.

    So, I've been scouring the net for different examples of jquery that have good photo sliders. I've come across a few but they are usually lacking in what I actually want or they contain bloated code that makes it hard to manipulate. So before I embark on trying to just make my own dang code:

    Is it possible to achieve this:

    •Two photo sliders on the same page.
    •Both displaying images on a rotating basis at different intervals.
    •Transitional effects (would like fancy ones)
    •One of these sliders I want to change the perspective of. So that it looks like each picture is displayed at an angle on the Z-plan. Kind of like you are driving by a billboard.
    •Able to use div tags to place the contact in absolute locations.
    •Be able to add captions.
    •Be able to move these captions in (like a fly-in) and add a transparency effect to the caption backgrounds. This transparency should not just be an alpha channel though, I've seen it look nice where it blurs the background as well.
    •Add a drop shadow effect to the bottom of the images or even better (preferably) a reflection.
    •No user interaction needed, so it should autoplay on its on.
    •Most difficult (I don't think this is possible) load the photos on demand. So when the page loads its not loading all 100 at the same time.

    Can all of these elements be done? Do you have a recommended starting point? I've been trying Nivo-Slider but I keep running into roadblocks with it. Probably just be my lack of programming knowledge.
    There is one slider I found that looks like it does everything required... however I think it might be php based. Which I'm not sure how to even do. These computers attached to the TV's are stand-alone. So unless I can install php on them somehow I don't know if this is possible. But as an example this is very close to what we want -> http://getcu3er.com/ (when the page loads it is the angled photo slider on the right.
    Last edited by themoon; 05-02-2013 at 02:18 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You can do all those things.

    You don't need PHP either. The example you provided uses Flash, but that's probably because they don't want anyone stealing the source code for their JavaScript version.

    As for a starting point...I'm not sure where you should start with this. There's really no shortcut to this. I would suggest learning the basics one step at a time. It'll be a lengthy process, but you'll have extreme flexibility.

    Do you understand the basics of CSS? For example, do you understand the box model? A lot of tutorials don't thoroughly explain the box model, and it'll help you truly understand CSS.

    If you do understand that, then start learning some JavaScript.

    You will also want to look at CSS transforms and CSS transitions.
    My signature :)

  • Users who have thanked ttkim for this post:

    themoon (05-02-2013)

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Yay! someone responded!

    I noticed in your CSS link that it appears the CSS is placed directly in the html document. I wasn't aware you could do it like this. I imagine you can do the same with java-script? I thought CSS and JS had to be in their own documents with their respective extensions .css and .js. So even though it might become quite crowded, you could potentially add everything under one .html?

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You could put it directly in the HTML document, but generally (not always), you want to keep them separate.

    For example, you create one stylesheet that multiple pages can link to. You make a change on that one stylesheet and you can keep a consistent look throughout your web site. If you use the style tag in the HTML document, then it can only apply to that one page.
    My signature :)

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    USA
    Posts
    101
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Yes you can achieve this with CSS3 and jquery

  • #6
    New to the CF scene
    Join Date
    May 2013
    Location
    INDIA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Define me properties of CSS3

  • #7
    New to the CF scene
    Join Date
    May 2013
    Location
    INDIA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In internet explorer 7 and 8 we do not use CSS3 can any jquery plugin make this possible?

    Thanks
    RIcha
    Last edited by Fou-Lu; 05-07-2013 at 02:11 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •