caption located outside of the image in nivo slider

Is there a way to show different texts on the left side of pictures using a nivo slider and have them slide like pictures? I have tried various solutions but cannot seem to move the text outside of the picture. When I add a negative value to the left, the caption disappears as it is visible only on the picture itself. How can I set the position of the caption outside the image, so that it is not part of the image? And is the nivo slider the right tool for this task?

                          -----------------------------------------
                          |                                       |
                          |              image                    |
 -------------            |                                       |
 |  caption   |           |                                       |
 --------------           -----------------------------------------

Thank you in advance for your help. Currently, I have the following setup: HTML

    <div id="feature-text-01" class="nivo-html-caption">
        <p><h2>Title 1</h2></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
    <div id="feature-text-02" class="nivo-html-caption">
        <p><h2>Title 2</h2></p>
        <p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
    </div>
    <div id="feature-text-03" class="nivo-html-caption">
        <p><h2>Title 3</h2></p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
    <div id="feature-text-04" class="nivo-html-caption">
        <p><h2>Title 4</h2></p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>

CSS

    .nivo-caption { 
        width: 200px; 
        height: 250px; 
        left: -200px; /* same as the width */
    }

Answer №1

My Solution:

To enhance your slider, include an additional parameter in your slider call

$('#Myslide').nivoSlider({
    manualCaption: true // Manual caption placement
});

Add the HTML code to your page where you want the slide caption to appear

<div id="manual-nivo-caption" class="nivo-caption"></div>

Customize the caption with any CSS styles you desire

#manual-nivo-caption{
    background: none;
    color: #000;
    position: relative;
    border: 1px solid #000;
}

Next, make modifications to jquery.nivo.slider.pack.js

Step 1: Add our new parameter to the slider's default settings

e.fn.nivoSlider.defaults={ ... , manualCaption:false, ... }

Step 2: Check the new parameter before adding the caption

Replace

s.append(e('<div class="nivo-caption"></div>'));

with

if(!r.manualCaption){s.append(e('<div class="nivo-caption"></div>'));}

Step 3: Change how captions are searched from parent-related to global scope

Replace

var n=e(".nivo-caption",s);

with

var n=e(".nivo-caption");

That wraps it up. I hope this proves helpful for you.

Answer №2

To prevent the caption from disappearing behind other elements, consider applying a positive z-index to it. This will ensure that the caption is displayed on top of everything else.

I tested this method with the controlnav and it worked flawlessly. The same approach should be effective for the caption as well.

Answer №3

Can you locate this specific CSS code for me?

.futurico-theme .nivo-caption
{
}

Then, could you please delete the following line:

margin-left:-50px

Answer №4

To change the position of the caption in Nivo Slider for each slide, simply define the title attribute with these styles:

.nivo-caption {
      position: absolute;
      left: 700px;
      top: 150px; /* y offset position */
      overflow: hidden;
      background: none;
      font-family: Helvetica, Arial, Sans-Serif;
      color: #FFF;
      font-weight: bold;
      font-size: 40px;
      line-height: 44px;
      text-align: left;
      text-transform: uppercase; /* converts text to UPPERCASE */
      z-index: 8;
  }

  .nivo-caption a {
      display: inline !important;
  }

For more information, you can visit this link: NIVO SLIDER: HOW TO CHANGE THE CAPTION POSITION FOR EACH SLIDE

Answer №5

To fix the issue, simply delete

      overflow: hidden;

from .nivoSlider {} in your CSS file and it should function properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to move the Grid upward when the above content is not visible?

Let me demonstrate what I have been working on. Currently, I am creating a weather application to explore the functionalities of https://material-ui.com/. I am attempting to prototype an animation inspired by Google Flights, which can be seen here: https: ...

Using jQuery's .on() method to dynamically add classes

Why is this method not functioning as expected? My understanding was that by assigning a class to the trigger element when it opens, I could then use that class to close it when the trigger is clicked again. // Trigger for menu $('.menu-trigger' ...

What is the best method for transferring HTML tables to Excel with multiple tabs?

I have created a code that exports an HTML table into an Excel file. However, I now need to export multiple HTML tables into different tabs within a single Excel file. Here is the current code: Currently, when I click "Export To Excel," the Excel file is d ...

Discover the presence of Control within a TemplateField of a GridView using either jquery or javascript

Is there a way to retrieve the control ID within the Item Template of a GridView on the client side when a button is clicked? I attempted the following code but it did not work. Any help would be appreciated! function buttonClicked(sender, args) { var ...

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values. table[my-type="myStyle"] { width: 255.388px !important; } This code snippet is included in numerous CSS files within my style directory. ...

Resolving the issue of "Mixed Active Content" CORS error detection

When using Firefox, if JavaScript tries to make a Cross-Origin Request (CORS) to an http server from a page hosted on https, an error is thrown: Blocked loading mixed active content I am trying to capture these errors, but I'm having trouble. For ex ...

Organizing grid elements within the popper component

I am struggling to align the labels of options in the AutoComplete component with their respective column headers in the popper component: https://i.stack.imgur.com/0VMLe.png const CustomPopper = function (props: PopperProps) { co ...

Utilizing the Filter function to extract both the content contained within a class and the class itself

The filter function is working properly, returning multiple divs with a class of post. However, it is only capturing the content inside the div: <h1></h1> and not the entire structure like this: <div class="post"><h1></h1>& ...

Ways to center a spinner on the screen using CSS during loading

Upon loading the page, my spinner appears in the center of the screen after a second. However, in the initial frame of the page, it is not centered but positioned on the top-left corner instead. How can I ensure that my spinner starts off centered from the ...

Randomizing the JSON loop on every page refresh

Having a JSON file containing various data items (as an example) that I am utilizing with handlebars.js to generate templates. The challenge lies in displaying 15 stories (each within their own div) on page load while shuffling their positions upon each r ...

What causes a new stacking context to be formed when using position: relative without z-index?

After reading this informative piece: When two elements share the same stack level, their layering is determined by their order in the source code. Elements stacked successively are placed on top of those that came before them. And referencing this ar ...

HTML textarea content will update automatically whenever there is an input change in JavaScript

Everything seems to be working as expected, but I noticed that the onmouseover event only triggers once. Is there a way to make it work multiple times, i.e., every time the text array changes? <html> <head> <script> function myFunct ...

Tabulator - Enhancing Filter Results Using a Second Tabulator

I've implemented a Tabulator that displays search results, here is the code: var table = new Tabulator("#json-table", { layout:"fitDataFill", //initialFilter:[{field:"title", type:"!=", value:"ignoreList.title"}], ajaxURL:tabUrl, ajax ...

Enjoy a fullscreen Youtube video embed with autoplay using Bootstrap's modal feature

https://codepen.io/JacobLett/pen/xqpEYE I recently watched a YouTube video where tapping on a button automatically played the video. I was impressed, but now I want to take it a step further and have the video play in landscape (full screen) mode when tap ...

Searching for corresponding items in multi-dimensional arrays using Javascript

For my project in Javascript, I am facing the challenge of matching entire arrays. In this scenario, I have a userInput array and my goal is to locate a similar array within a multi-dimensional array and display the match. var t1 = [0,0,0]; var t2 = [1,0, ...

Retrieving JSON information from a server and displaying it in a listview using JQuery mobile

I'm a newcomer to JQM and javascript, and I've encountered an error on my page. Could someone lend a hand in figuring out what's causing it? ERROR: function Error() { [native code] } fiddle link: http://jsfiddle.net/umarF/ ...

Which element is undefined in this scenario - the Event Object or the inputs?

While working on OTP verification in Reactjs, I encountered an error message when running my code: Error: Cannot read properties of undefined (reading 'value') import { useState, useEffect, useRef } from 'react' import '../src/ ...

Verify if the input text field meets the minimum value requirement upon submission

I have a basic HTML form on my website... After collecting the user input, I convert it into JSON data (intending to send it elsewhere later on. Currently, just using console.log for testing). Once the user fills out the form and clicks submit, I want to ...

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Recently, I encountered an issue while trying to create a dropdown menu using Jquery. The problem arose when attempting to select the second link, as the entire menu would disappear. Additionally, is there a way to ensure that only one dropdown menu is vis ...

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

I'm struggling to figure out the correct way to write this script. Can someone please guide me in the right direction or suggest an alternative method? I've searched but haven't found any relevant examples. I am fetching information from a ...