Display entry title related to (channel images) image if exists

Question

I have a channel named Projects, and within that channel i have a 'channel images' field (p_feature). It allow the user to upload one image, and if they do so that image will appear on the Home page as part of a carousel slider. ..So a 'feature' image is not uploaded for every Project entry, but only the ones the user wants featured on the home page.

Below is how the html looks:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>

 <div id="slider" class="nivoSlider">
  <img src="1.jpg" data-thumb="1.jpg" alt="" title="#htmlcaption1"  />
  <img src="2.jpg" data-thumb="2.jpg" alt="" title="#htmlcaption2"  />
 </div>

 <div id="htmlcaption1" class="nivo-html-caption">Title 1 <a href="#">Link 1</a></div>
 <div id="htmlcaption2" class="nivo-html-caption">Title 2 <a href="#">Link 2</a></div>

</div>

The Captions appear below the slider div, and also link to the Project.
So my code produces the image, but i'm not sure how to produce the caption (project title & url) that relates to the feature image uploaded.

Plus because the captions (have to) appear outside of the slider div, do i have to open the channel entries tag again?

So something like this:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">
 {exp:channel:entries channel="project"}
    {if p_feature}
    {exp:channel_images:images channel="project" entry_id="{entry_id}"}
      <img src="{image:url:carousel}" data-thumb="{image:url:carousel}" alt="" title="#htmlcaption{entry_id}" />
    {/exp:channel_images:images}
    {/if}
 {/exp:channel:entries}
</div>


 {exp:channel:entries channel="project"}
  {if p_feature}
    {exp:channel_images:images channel="project" entry_id="{entry_id}"}
        <div id="htmlcaption{entry_id}" class="nivo-html-caption">{title} <a href="/projects/{url_title}">Read More</a></div>
    {/exp:channel_images:images}
  {/if}
 {/exp:channel:entries}

</div>

Plus is there a way to 'automatically' add ascending numbers? I would need that for the #htmlcaption1, #htmlcaption2, #htmlcaption3 etc.

Any help is greatly appreciated!

UPDATE: Code has been updated with working solution.

Answer 1

Yup, that's the way. I hope someone can post a better answer, but I have nivoSlider live on several sites, and here is my implemented code off of one of them:

<div class="slider-wrapper theme-light">
    <div class="ribbon"></div>
    <div style="width: 100%;" class="nivoSlider" id="slider" style="overflow: hidden">
        {exp:channel:entries channel="homepage_slider"}
            {if link}
                <a href="{link}"
                    {if target}
                        target="_self"
                    {if:else}
                        target="_blank"
                    {/if}
                    >
                    <img src="{image}" title="#nivo_htmlcaption{entry_id}"/>    
                </a>
            {if:else}
                    <img src="{image}" title="#nivo_htmlcaption{entry_id}"/>
            {/if}
        {/exp:channel:entries}
    </div>
    {exp:channel:entries channel="homepage_slider"}
    <div id="nivo_htmlcaption{entry_id}" class="nivo-html-caption ">
        <div class="nivo-html-caption-headline slider-title">
            {if link}
                <a href="{link}"
                    {if target}
                        target="_self"
                    {if:else}
                        target="_blank"
                    {/if}
                    >
            {/if}
            {headline}
            {if link}
                </a>
            {/if}
        </div>
        <div class="nivo-html-caption-subtitle slider-subtitle">
            {if link}
                <a href="{link}"
                    {if target}
                        target="_self"
                    {if:else}
                        target="_blank"
                    {/if}
                    >
            {/if}
            {subtitle}
            {if link}
                </a>
            {/if}
        </div>
    </div>
    {if link}
        </a>
    {/if}
    {/exp:channel:entries}
</div>

It's basically what you already thought of. Two channel entry loops really doesn't cause a huge performance hit. Complicated parsing does but that isn't a big deal (especially if you use something like CE-Cache or CloudFlare, which you should if it's a heavy site with a lot of hits). As for ID's, just wing the entry_id tag like I did, since it's unique anyways!

Edit:

That's a broken way to do that conditional, friend. Do this:

{if p_feature}
    <div>{p_feature} goes here</div>
{/if}

Here:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
    {exp:channel:entries channel="project" dynamic="no" limit="1"}
        {exp:channel_images:images entry_id="{entry_id}"}
        <img src="{image:url:carousel}" data-thumb="{image:url:carousel}" alt="" title="#htmlcaption-{entry_id}" />
        {/exp:channel_images:images}
    {/exp:channel:entries}
</div>

{exp:channel:entries channel="project" disable="categories|category_fields|member_data|pagination|trackbacks" limit="1"}
{if p_feature}
{exp:channel_images:images entry_id="{entry_id}"}
    <div id="htmlcaption-{entry_id}" class="nivo-html-caption" title="slide-{entry_id}">
        Dump whatever channel:images tags you want here.
        {title}
        <a href="/projects/{url_title}">
            Read More 
        </a>
    </div>
{/exp:channel_images:images}
{/if}
{/exp:channel:entries}

Please refer to:

http://www.devdemon.com/documentation/tag/images/