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
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Inserting Images onto My Website's Slider

    Hi Guys,

    Basically, I run a website www.internetwresltingnews.com - It is actually a blog hosted on blogspot...Now I'm thinking of getting a new theme for the site so I can have a "Top Stories" Slider somewhere on the page...

    Now...the website is all run online...It wasn't coded on my machine so I don't have any html files, however, If i was to get a theme that contained a slider for top stories....HOW would I get an image on that slider....

    For example...let just say a top story is something about football...and I want a picture of a football as the picture for that story...on the "top stories" slider...How would I do it? I've looked at code on other sites and due to their website's files being local on their machine, they all have paths like "img src="/./whatever/documents/images" or something along those lines...

    How would I do it if i had an image on my computer which had either been taken off the internet or whatever then wanted to use it as a "Top Stories" image on my slider.

    Thanks in Advance
    Aaron
    Last edited by aaronoafc; 05-31-2012 at 09:42 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    This requires much more than simple html.

    What you will be doing is setting up a div that includes via php/javascript your predefined posts, and certain elements of those posts i.e. the thumbnail, the title, a snippet of the post, etc.

    If your totally lost I would just find a nice theme that has this already laid out for you.

    http://www.elegantthemes.com/demo/?theme=Evolution

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi mate,

    It's not the actual "Slider" Im wanting to code...just how I would put the image on the slider.

    For example a slider with scrolling images...each image has an assigned story...

    say a slider off...football image (football related story)....cricket image(cricket story) etc...

    but how would I upload the image? is it possible? other websites have the image locally on their machine in an "images" folder which they put in the path in HTML...

    However mine would be online with nowhere to put that due to the theme being ONLINE...not LOCAL.

    Thanks
    Aaron

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    well either way you will be loading the file on the server so that the website can call for the image via a path based on your domain i.e. yourdomain.com/home/images/theimageyouwant.png.

    And as far as inserting it into the post that all depends how the slider works. Is the slider pulling from dynamic posts? are the various slides predefined?

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    No, here is the code, I would be wanting to add an <img src="..."> after each item

    Code:
    <div id="top-stories" class="block h250">
    <div class="controls">
    <h2>Top Stories</h2>
    <span>
    
    </span>
    </div>
    <div class="slider-wrap">
    <ul class="slider" type="none">
    <li>
    <a href='http://www.internetwrestlingnews.com/2012/05/breaking-news-randy-orton-suspended.html' class='caption'>
    <h3>BREAKING NEWS: Randy Orton Suspended For 60 Days</h3>
    
    </a>
    </li>
    <li>
    <a href='http://www.internetwrestlingnews.com/2012/05/early-wm29-plans-for-undertaker-wwe.html' class='caption'>
    <h3>The Undertaker's WM29 Opponent, WWE Woried By Raw Rating</h3>
    </a>
    </li>
    
    <li>
    <a href='http://www.internetwrestlingnews.com/2012/05/smackdown-spoilers-for-this-fridays.html' class='caption'>
    <h3>*Spoilers* WWE Smackdown Results For Friday's Show!</h3>
    </a>
    </li>
    </ul>
    </div></div>
    You can change the link to another article

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO I get it now.

    You can use a image hosting site like imageshak.us, have them host the image, and using their provided link, then insert in your html like below.


    PHP Code:
    <div id="top-stories" class="block h250">
    <
    div class="controls">
    <
    h2>Top Stories</h2>
    <
    span>

    </
    span>
    </
    div>
    <
    div class="slider-wrap">
    <
    ul class="slider" type="none">

    <
    li>
    <
    img src=".../images/yourimage1.png"/>
    <
    a href='http://www.internetwrestlingnews.com/2012/05/breaking-news-randy-orton-suspended.html' class='caption'>
    <
    h3>BREAKING NEWSRandy Orton Suspended For 60 Days</h3>

    </
    a>
    </
    li>
    <
    li>
    <
    img src=".../images/yourimage2.png"/>
    <
    a href='http://www.internetwrestlingnews.com/2012/05/early-wm29-plans-for-undertaker-wwe.html' class='caption'>
    <
    h3>The Undertaker's WM29 Opponent, WWE Woried By Raw Rating</h3>
    </a>
    </li>

    <li>
    <img src=".../images/yourimage3.png"/>
    <a href='
    http://www.internetwrestlingnews.com/2012/05/smackdown-spoilers-for-this-fridays.html' class='caption'>
    <h3>*SpoilersWWE Smackdown Results For Fridays Show!</h3>
    </
    a>
    </
    li>
    </
    ul>
    </
    div></div
    Last edited by SeattleMicah; 06-01-2012 at 08:51 AM.

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks a lot buddy!


  •  

    Posting Permissions

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