Jump to:

513 Posts in 209 Topics by 259 members

Content Editor Discussions

SilverStripe Forums » Content Editor Discussions » How can I make image rotate and have hyperlinks

Forum for content editors and CMS users.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 5521 Views
  • Singh
    Avatar
    Community Member
    9 Posts

    How can I make image rotate and have hyperlinks Link to this post

    Hi

    I am trying from a long time to get something like http://silverstripe.org/ homepage, where an image is changing and gives a link to a new page. Can anyone help me building something like that.
    I basically want it for my website, where i would like to have images pointing to different pages for news purposes.

    Thanks
    Singh

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    This can be done in two methods,

    Create two images with the logos,

    Set a background for a H1, or something else to display

    My example is this

    <style type="text/css">

    #Header{
    background:url(urlof the image);
    width:somewith;
    height:someheight;
    overflow:hidden;
    text-indent:-90000px;
    }

    #Header:hover{
    background:url(url of the second image);
    }

    </style>

    ....

    <h1 id="Header">This is the header</h1>

    ....

    This is the second method. Use a large image with both logos. one below the other.

    Use the following code to make it.

    <style type="text/css">

    #Header{
    background:url(urlof the image) top;
    width:somewith;
    height:someheight;
    overflow:hidden;
    text-indent:-90000px;
    }

    #Header:hover{
    background:url(urlof the image) bottom;
    }

    </style>

    ....

    <h1 id="Header">This is the header</h1>

    ....

    I would really suggest you to use the second method

  • UncleCheese
    Avatar
    4085 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    Yeah, the first method isn't really all that practical. You'll suffer lag time while the second image loads. Sprites, as suggested in the second method are really the accepted best practice for this.

  • ajshort
    Avatar
    Community Member
    244 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    I think you both misunderstood the question - I think that Singh is referring to the image carousel rather than the home page link.

    In response to the OP: This is not an SS effect, but rather something that you need to achieve using some sort of javascript. There are many plugins available for many JS frameworks that enable you to do this. Something like the jquery cycle plugin (http://malsup.com/jquery/cycle/) would achieve what you are after - all you need to do is set up SS to output the appropriate HTML using a <% control %> tag, and then use the Requirements class to include some custom javascript that fires of the cycler.

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    Yes Ajshort, I think you are correct, I found a nice carousel plugin for JQuery,

    http://plugins.jquery.com/project/agile-carousel

    Also I am thinking of working on a module to do this, lets see what I can do ;)

  • Singh
    Avatar
    Community Member
    9 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    Hi Guys,

    Thank you very much for the support, Actually Something went wrong and i never got an email for the replies to post, I kept looking the post for a day, and then never came back. I just checked it again to see such a great support. Actually ajshort is right. Thats what I am trying to do, and yes I tried it using agile carousel as suggested by Nivanka, but I am messing it up, due to some reason. Please let me know if any one gets success using agile carousel.
    I will keep on visiting this discussion now on.

    Thanks
    Singh

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    Hi did you refer to the agile carousel demo.

    anyway I have something like that included on my website http://whynotonline.com
    it is done with the interface plugin for jQuery. http://interface.eyecon.ro/

    i think you have done something wrong with the carousel.

  • Singh
    Avatar
    Community Member
    9 Posts

    Re: How can I make image rotate and have hyperlinks Link to this post

    Hi Nivanka

    Thanks for your replies, I tried using agile carousel. If I make a separate folder in my FTP directory, and copy all the contents of the agile, everything works, But when I could not get it going when I want to use the carousel in the existing webpage, It changes the layout and some other settings of the page, due to css file I think, and no image comes up.
    Can you please tell me, where should I put these files in my website, so that they work fine.

    Cheers
    Singh

    5521 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.