Hi there,

 

I'm designing a website that is selling cars, I'm using the fancybox plug in which when you click on the image of the car a larger image pops up.

 

What i'm looking to do is when this image pops up, either the caption (probably the easiest way) or an area to the side that displays information to the right. Sort of in this layout:

___________________

| | |

| | |

| | |

| | |

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

 

The car image being to the left with the caption or block of text to the right.

 

I'm open to using any other lightbox sort of script that supports this.

 

An idea I had was to create a separate html page and use the iframe support fancy box has, but with lots of deals going on there this could be a long process.

 

Thanks

Edited November 15, 201312 yr by Mully

I don't think iFrames are the way to go here. Fancybox has the ability to show text (Although the purpose is for a title) with an image, so you should be able to restyle this to your needs.

I don't think iFrames are the way to go here. Fancybox has the ability to show text (Although the purpose is for a title) with an image, so you should be able to restyle this to your needs.

 

I have just messed around with iframes and got a desired result. Why would you steer clear of them?

 

^^ iFrames are usually heavier to load than just putting your content in a textbox. Additionally, it's easier to edit your content if it's all in one page rather than having to navigate to your iFrame url's every time you want to change something.

^^ iFrames are usually heavier to load than just putting your content in a textbox. Additionally, it's easier to edit your content if it's all in one page rather than having to navigate to your iFrame url's every time you want to change something.

 

The way I have structured my folders would mean it would probably be easier to find the relevant iframe html page.

 

I think this solution is viable for now until I notice some severe load time issues.

 

Any other solutions are welcome.

Fancybox has an Ajax call which would work better. You could easily pull just the content off of the page that you are looking for.

 

$('.click-this').fancybox({
    'type': 'ajax',
    'ajax': {
        dataFilter: function(data) {
            return $(data).find('#yourTargetID .orYourTargetClass');
        }
    }
});

Keep in mind that both iframes and ajax loaded content is not by nature an element on your page so any content in your fancybox will not be indexed or asociated as frontpage content by search engines. So if you choose one of these solutions you can not have any important content in the fancybox. Search enginges could also create results leading people to land on one of your iframe source pages which wouldn't be pretty. You can of course always choose to disallow crawling of the iframe pages in a robots.txt file on your server. Personally I think you should take SimpleSucces' advice and store the content within your page.

Edited November 18, 201312 yr by Nillervision

Nillervision makes a very good point, you will have to keep this in mind when working with ajax loaded pages.

One of the reasons why I like the ajax version is because it allows me to have a full page with header, navigation and sidebar so if someone does land on one of these pages it would look and feel like the rest of the site.

For the search engine part, its always best to keep all the content in the lightbox "simple" but if you do have important information you can set the page to follow and no index, this way search engines will follow the page but wont show the pages in the search results.