ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Nivo HELP - Entry Problem

January 23, 2012 7:43am

Subscribe [2]
  • #1 / Jan 23, 2012 7:43am

    Ryan Faubion

    81 posts

    This question may be related to a resolved thread.

    Hello all,

    I’m have troubles with my Nivo Slider. My images are displaying and I have some accompanying text I want to display for each featured item in the slider, as you can see it here: http://cl.ly/010K0d1u3H2N461H0p0o . Problem is the text flashes like it’s change but instead I just see the same title (which is the address) even though the image is changing.

    Here my code:

    <div id="featured">
           <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">
            {exp:channel:entries channel="rental_properties" dynamic="no" status="featured property" disable="categories|member_data|category_fields|member_data|pagination"}
            <div id="portfolio" class="nivoSlider">
             <ol>
                 {property_images} 
           <li>{exp:imgsizer:size src="{image}" alt="{title}" width="578px" height="316px" title="#htmlcaption"}</li>
           {/property_images}
          </ol>
            </div>
            
            <div id="htmlcaption" class="nivo-html-caption">
             <div class="property_info">
                 <h5 class="red">{title}</h5>
                 <ul>
                  <li><strong>Location:</strong> West</li>
                  <li><strong>Property Type:</strong> Apartment</li>
                  <li><strong>Bedrooms:</strong> 1 - 3</li>
                  <li><strong>Bathrooms:</strong> 1 - 2</li>
                  <li><strong>Monthly Rent:</strong> $599.00 - $999.00</li>
                 </ul>
          </div>
          <a href="http://%22class=%22learnmore" title="" class="learnmore"></a>
         </div>
         {/exp:channel:entries}
         </div>
        </div><!-- END SLIDER-WRAPPER -->
       </div><!-- END FEATURED -->

    any ideas why it’s pulling the images that ‘featured property’ but not the title (address)?

     

  • #2 / Jan 23, 2012 8:12am

    Osze

    42 posts

    This is a Nivo Slider problem. But my suggestion is to use BXslider (http://bxslider.com/) instead of Nivo!
    Much better and easier to style.

    With BXslider you’ll style everything in <li></li>.

    So for your site the HTML would be something like:

    <li>
    <div class="photo">
        " alt=
    </div><!-- /.photo -->
    
    <div class="text">
     <h2>Title</h2>
    
    <p><b>Location:</b> West</p>
    
    <p><b>property Type:</b> West</p>
    
    <p><b>Bedrooms:</b> West</p>
    
    <p><b>Monthly rent:</b> West</p>
    
    <p><br />
    <a href="http://" title="">LEARN MORE</a><br />
    </div><!-- /.text --><br />
    </li>

  • #3 / Jan 24, 2012 3:59am

    Ryan Faubion

    81 posts

    Thanks Osze!

    This was much much easy and quicker. So long Nivo!!!

  • #4 / Jan 24, 2012 4:11am

    Osze

    42 posts

    Cool that you liked it.
    I was thinking about the best CSS/HTML solution to get the background to work. (put the flag infront of the photo)

    You’ve probably have a great solution for this but I’ll write my suggestion just because I love CSS. 😊

    1. Cut out the middle of the entire background and use position: absolute; and z-index to put the background-image INFRONT the entire photo.

    2. Just cut out the small part of the flag that is infront of the photo an just position and z-index to put it infront of the photo. And then have the rest of the background image like a normal background on the div - photo.

    I think solution first is the coolest. 😊

  • #5 / Jan 24, 2012 4:23am

    Ryan Faubion

    81 posts

    Thanks man.

    Yeah, I had it working with Nivo but I remember it took a bit of time and z-indexing to get it to work. For the interim, we’ll see what the client says, i’ve pushed over to the right above the property features. A little less elegant but it works: http://test.hallmarkrentals.com/

  • #6 / Jan 24, 2012 4:46am

    Osze

    42 posts

    Yeah, It looks nice.

    but I would go with the arrows in the picture. (maybe a bit more white and a small shadow to make it more visiable?)

    - left: 38px;
    - right: 345px;

  • #7 / Jan 24, 2012 11:21am

    Lisa Wess

    20502 posts

    What a great thread to see - thank you for all of the help!

    Since this was about a particular slider and not EE, and has an active conversation, I’ve moved it down to Community Help so you can continue.

    Thanks guys!

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases