Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Text on Carousel images

  1. #1
    Junior Member
    Join Date
    Jun 2016
    Posts
    10

    Default Text on Carousel images

    I want install a carousel into a web site that I run. I can install the object and add photographs no problem - looks great. But I would like to add some text over the top of each image as it changes in the carousel. Is there a way of doing this, or do I have to amend the jpeg images first before I add them? I have tried adding text to the image in Photoshop, but the quality of the text on the image is very poor. Is there any advice for me? Many thanks.

  2. #2
    Member TomDunne's Avatar
    Join Date
    Feb 2011
    Location
    Hartford, WI
    Posts
    59

    Default

    You can write a caption for each photo. I don't think there is a way to center that caption. Simply click on the carousel layout and then go to the properties box and enter caption...

  3. #3
    Senior Member chuckj's Avatar
    Join Date
    Jan 2010
    Location
    www.beyondfusion.com - Florida
    Posts
    1,302

    Default

    If you size the images in Photoshop to the size you'll set in the carousel and add your text in Photoshop, it'll look fine.

    Letting Fusion resize images with text will never produce good results.
    Chuck Joslin
    www.BeyondFusion.com
    PHP & MySQL development with Fusion
    Fusion support for AllWebMenus (Likno) Contact me for custom AWM menus for your sites.
    Tutorials and Forums

  4. #4
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    998

    Default

    Hi,

    but of course you can center the caption and the position. Just edit the css file:

    'nof_jcarousel_skin.css'


    .jcarousel-skin-nof .jcarousel-caption{
    position: absolute;
    bottom: 0;
    background: #000;
    background: rgba(0,0,0,0.5);
    left: 0;
    right: 0;
    color: #fff;
    padding: 1em;
    text-align: center;
    transition: opacity 0.1s;
    -moz-transition: opacity 0.1s;
    -webkit-transition: opacity 0.1s;
    -o-transition: opacity 0.1s
    }
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  5. #5
    Member TomDunne's Avatar
    Join Date
    Feb 2011
    Location
    Hartford, WI
    Posts
    59

    Default

    Hi Thomas,
    Thank you for showing that the text can be centered...How do I get to that CSS file to edit? I would like to learn how to do this.

  6. #6
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    998

    Default

    the easiest way is probably to edit it directly in the "design view" of NOF under "CSS-Code"


    Click image for larger version. 

Name:	CSS-Code.jpg 
Views:	192 
Size:	109.7 KB 
ID:	2490
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

  7. #7
    Member TomDunne's Avatar
    Join Date
    Feb 2011
    Location
    Hartford, WI
    Posts
    59

    Default

    Thomas, thank you. That is very good to know. I appreciate your help...
    tom

  8. #8
    Senior Member gprit's Avatar
    Join Date
    Dec 2010
    Location
    France...ex UK
    Posts
    595

    Default

    Crikey - all this talk about editing css......it is simple to add a caption at the bottom of each carousel image from within NOF ....if you REALLY need to you can also change the text/colour....but really....stick to what is provided.

  9. #9
    Junior Member
    Join Date
    Jun 2016
    Posts
    10

    Default

    Many thanks all for the collective advice, much appreciated. Is it also possible to add a hot spot to a carousel picture?

  10. #10
    Senior Member Thomas Frei-Herrmann's Avatar
    Join Date
    Apr 2010
    Location
    Berlin, Germany
    Posts
    998

    Default

    I have not yet tried - probably yes via file "jcarousel.js" - but this is not really easy
    Tommy

    Administrator at the German NOF-Forum

    NOF-Tutorials.com | German NOF-Forum | Overview of my tutorials | Facebook

Posting Permissions

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