Databases
StackOverflow2013
Postsdbo
POColorbox - linking to an HTML file but parsing a variable via colorbox which changes content of HTML file?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POColorbox - linking to an HTML file but parsing a variable via colorbox which changes content of HTML file?
    primarykey
    data
    text
    <p>Sorry - I may not have explained this too well. Basically I'm a designer who is relatively new to jQuery. Our team are working on a project where we require an image (and others grouped by the rel attribute) to load up into a shadowbox. That's fine - I've integrated Colorbox into the page concerned and all works fine.</p> <p>Now some bright spark has had the idea that we should display 'banner advertising' on the colorbox window underneath the image we have displayed as it will generate revenue for the business.</p> <p>Now my initial thought is that it could possible be done by using the iframe method as we can call an HTML page which has the banner code on that (I'm yet to work out whether it would reload a new banner advert when the user is navigating through the gallery).</p> <p>The thing is... our site is sort of like an Autotrader.co.uk if you will - basically the potential for A LOT of images - a user can upload as many as they want, it's not limited - so I really don't want to have to create a new HTML page EVERY time a new image gets uploaded as that's just ridiculous.</p> <p>Forgive me if this is a stupid question... but is there any way that we can create 1 HTML file (with the banner ad code) on and then parse the image src via colorbox in some way? OR edit the colorbox script so that it has an area for the banner ad at the top of the image?</p> <p>I've been trying to work out how Autotrader do it and it looks like they have a different URL for each image?</p> <p>Any help/advice would be greatly appreciated...</p> <p>And just so you can see what we are trying to achieve, click on one of the thumbnails and you'll see the banner ad display above the image</p> <p><a href="http://www.autotrader.co.uk/classified/advert/201118386320705/sort/priceasc/usedcars/make/abarth/page/1/radius/1500/quicksearch/true/postcode/so152ed?logcode=p" rel="nofollow">http://www.autotrader.co.uk/classified/advert/201118386320705/sort/priceasc/usedcars/make/abarth/page/1/radius/1500/quicksearch/true/postcode/so152ed?logcode=p</a></p> <p>Thanks</p> <p>Update:</p> <p>Presently we just have a 'product detail' page - there is a jQuery image gallery and colorbox is used to display the larger images, HTML of that section is below;</p> <hr> <pre><code>&lt;div id="fragment-1" class="ui-tabs-panel"&gt; &lt;div class="boatImages"&gt; &lt;div class="underOfferBanner"&gt;&lt;/div&gt; &lt;a href="http://www.solarnavigator.net/animal_kingdom/animal_images/cat_yawning_canine_teeth.jpg" rel="gallery" title="Angry cat - or is it just yawning?"&gt;&lt;img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"&gt; &lt;div class="boatImages"&gt; &lt;div class="underOfferBanner"&gt;&lt;/div&gt; &lt;a href="http://files.overyourhead.co.uk/images/misc/Cat%20with%20too%20much%20time.jpg" rel="gallery"&gt;&lt;img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"&gt; &lt;div class="boatImages"&gt; &lt;div class="underOfferBanner"&gt;&lt;/div&gt; &lt;a href="http://www.solarnavigator.net/animal_kingdom/animal_images/cat_yawning_canine_teeth.jpg" rel="gallery"&gt;&lt;img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"&gt; &lt;div class="boatImages"&gt; &lt;div class="underOfferBanner"&gt;&lt;/div&gt; &lt;a href="http://files.overyourhead.co.uk/images/misc/Cat%20with%20too%20much%20time.jpg" rel="gallery"&gt;&lt;img src="http://www.examplesite.com/boatImages/2010/11/2/9521834.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <hr> <p>At the moment the images just open in colorbox as normal images</p> <pre><code>$(document).ready(function(){ $("a[rel='gallery']").colorbox(); &lt;/script&gt; </code></pre> <hr> <p>the colorbox script is as per the download on the main site - <a href="http://colorpowered.com/colorbox" rel="nofollow">http://colorpowered.com/colorbox</a> - i did add it but took my post over 3000 character limit.</p> <hr> <p>The HTML page would be something along the lines of this</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="bannerAdvertGoesHere"&gt; &lt;!--banner ad script goes here - changes dynamically --&gt; &lt;/div&gt; &lt;div id="galleryImage"&gt; &lt;!-- need to try and change the url of the image below from the trigger on product detail page --&gt; &lt;img src="test-image.gif" width="600" height="600" alt="test" /&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p>Ideally we'd like this one HTML page to have the image on it dynamically change depending on what image was clicked on the 'product detail' page.</p> <p>Failing that - maybe if someone could point me in the right direction of how i could alter the shadowbox code so that the banner script is actually part of it?</p> <p>Thanks in advance</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USV Neal
    1. USV Neal
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POColorbox - linking to an HTML file but parsing a variable via colorbox which changes content of HTML file?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POColorbox - linking to an HTML file but parsing a variable via colorbox which changes content of HTML file?
      1. UST Nguyen
      1. VTFavorite
    1. COJust to get this straight, you have a banner advert on your page, which is dynamic. And you'd like this exact banner advert to be displayed under an image in a lightbox? Also, could you post up the code you have so far.
      singulars
      1. POColorbox - linking to an HTML file but parsing a variable via colorbox which changes content of HTML file?
      1. USRory McCrossan
    2. COHi - I've edited the post above with HTML and jQuery. In essence yex, the banner ad needs to display above/beneath (not fussed) the image in the lightbox - however, as mentioned, the colorbox script is also used elsewhere to open up web pages/other links and it's not necessary to have this banner advert display on these. Thanks for the reply :)
      singulars
      1. POColorbox - linking to an HTML file but parsing a variable via colorbox which changes content of HTML file?
      1. USV Neal
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload