Rollovers and carousel

Hi Walter,

Just wondering if you know of any sites that explain the Ajax side of things with regards to Carousels.

Thanks.
Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s one that does it:

http://docs.prototype-ui.com/rc0/Carousel

I know there was another one I saw when I was researching options for
my Action, but I can’t find it now.

Basically, what you would want in terms of Ajax is what’s known as
“lazy loading”. Your Carousel would load up only two panes, then load
the third (and so forth) when you request the second one to scroll
into view. Each time that the next part loads, it would need to update
the variables in the JavaScript to tell it how wide the inner sliding
element is. You could not use tabs with this construction, because
when the page loads, it doesn’t know how many options there might
eventually be. Or you could use tabs, but you would have to load them
lazily as well.

On your server, you would have a script (PHP, Ruby, whatever) that
constructed a pane. This would need to come out of a database or maybe
just a directory listing. When this script gets its initial request,
it would pop out two panes’ worth of HTML and send it along. It would
also set a counter to 2, and when it next gets a request, it would
send number 3 and increment the counter, etc. In JavaScript, in the
browser, clicks on the “next” button would advance the carousel as
always, but would also call Ajax.Updater in the background to request
the next pane of content.

Walter

On Feb 1, 2009, at 9:19 AM, Tonsils wrote:

Hi Walter,

Just wondering if you know of any sites that explain the Ajax side
of things with regards to Carousels.

Thanks.
Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

I’ve just been trying to incorporate a jQuery Lightbox feature into my carousel. Unsure what I could be doing wrong but prior to applying the Carousel action, I’ve managed to get the lightbox feature to work, by where a click on a thumbnail and the jQuery lightbox feature kicks in.

On top of this, I apply the Carousel action and instead of my thumbnail utlising the jQuery lightbox, it actually opens the picture in over my original page of thumbnails.

Just wondering if there would be any conflict between the carousel action and the jQuery Lightbox.

Thanks.
Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s best not to mix high-level libraries like jQuery and Prototype.
Carousel uses Prototype. If you want to use jQuery elsewhere, you’ll
have to use a different carousel effect that’s based on jQuery. (They
exist, and you shouldn’t have too much trouble exchanging my Action-
ized method for a hand-coded jQuery approach if you’ve already gone
down that particular rabbit-hole.)

Walter

On Feb 16, 2009, at 8:52 AM, Tonsils wrote:

Hi Walter,

I’ve just been trying to incorporate a jQuery Lightbox feature into
my carousel. Unsure what I could be doing wrong but prior to
applying the Carousel action, I’ve managed to get the lightbox
feature to work, by where a click on a thumbnail and the jQuery
lightbox feature kicks in.

On top of this, I apply the Carousel action and instead of my
thumbnail utlising the jQuery lightbox, it actually opens the
picture in over my original page of thumbnails.

Just wondering if there would be any conflict between the carousel
action and the jQuery Lightbox.

Thanks.
Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter - understand.

Just wondering if you know of a good jQuery Carousel at all?

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I can’t recommend one from personal use, but if you google jquery
carousel, the first hit looks really interesting and well documented.

Walter

On Feb 16, 2009, at 4:55 PM, Tonsils wrote:

Thanks Walter - understand.

Just wondering if you know of a good jQuery Carousel at all?

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

this carousel and tabs looks as though it might be what I need as I outlined in the thread I posted earlier today.

could I put media players in the panes?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks again but I was just wondering, with the whole jQuery and Prototype combination possibly being an issue, would the jQuery function:

jQuery.noConflict( );

assist in any way?

Thanks.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, it should work, although there are reports of some instances
where there is “leakage” from the hidden part of the carousel when the
content includes Flash. (I haven’t seen this myself.) You should try
it out, test it in a number of different browsers to be sure.

Walter

On Feb 17, 2009, at 3:08 AM, Ginjg wrote:

this carousel and tabs looks as though it might be what I need as I
outlined in the thread I posted earlier today.

could I put media players in the panes?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, that’s what it’s for. I haven’t researched this much myself, but
basically what this does is replace the $() function (shorthand for
findElementById()) with $jQuery() or something like that. Since
Prototype also has a $() function, used for the very same purpose, the
two clash otherwise. The part I don’t know is whether enabling
noConflict() means that you would have to go through any other library
code that invokes jQuery’s $() function and replace those calls with
$jQuery().

Walter

On Feb 17, 2009, at 4:44 AM, Tonsils wrote:

Thanks again but I was just wondering, with the whole jQuery and
Prototype combination possibly being an issue, would the jQuery
function:

jQuery.noConflict( );

assist in any way?

Thanks.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Unfortunately I can’t seem to get the carousel working with the jQuery Lightbox plug-in.

Would really appreciate some help. Here is a snippet of code from the page source, including the jQuery.noConflict() statement:

<script type="text/javascript">
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
    $j('#gallery a').lightBox();
});
</script>

<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
	background-color: #444;
	padding: 20px;
	width: 94%;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
	border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	border-width: 5px 5px 20px;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>




		<div id="item1" style="position:absolute; left:5.19px; top:5px; width:710px; height:589px; z-index:1">
			<div id="gallery">
<ul>
    <li>
        <a href="photos/image1.jpg" title="screen shot 1">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />



</ul>
	<div id="galleryContainer1" class="section"><div style="position:relative; width:719px; height:594px; background-color:#fff; overflow:visible">
		<div id="item1a" style="position:absolute; left:5.19px; top:5px; width:710px; height:589px; z-index:1">
			<div id="gallery">
<ul>
    <li>
        <a href="photos/image1.jpg" title="screen shot 1">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

etc


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry - forgot to mention that the jQuery Lightbox plug-in works but the Carousel side of things doesn’t.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Please send a link to the page, I can inspect it in Firebug and see
what’s going on.

Walter

On Feb 18, 2009, at 6:23 AM, Tonsils wrote:

Sorry - forgot to mention that the jQuery Lightbox plug-in works but
the Carousel side of things doesn’t.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Unfortunately I am unable to host page.

With regards to Firebug, are you able to let me know what I should be looking for, to see, if I can detect anything.

Thanks.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you install Firebug, enable it, and visit the page in Firefox (naturally) you will see a little red (x) in the bottom-right of the browser frame. Click it, and see what it says. Copy and paste it into a new message here, and we’ll see what’s up.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

There was a red(x) in the bottom but unfortunately nothing came up.

Sorry, but I have decided to add the whole “View Page Source” code in this thread:

<script type="text/javascript">
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
    $j('#gallery a').lightBox();
});
</script>

<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
	background-color: #444;
	padding: 20px;
	width: 94%;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
	border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	border-width: 5px 5px 20px;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
screenshots
		<div id="item1" style="position:absolute; left:5.19px; top:5px; width:710px; height:589px; z-index:1">
			<div id="gallery">
<ul>
    <li>
        <a href="photos/image1.jpg" title="screen shot 1">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 2">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 3">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 4">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 5">

            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 6">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 7">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    
            <li>
        <a href="photos/image1.jpg" title="screen shot 8">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 9">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 10">

            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 11">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image5.jpg" title="screen shot 12">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 13">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 14">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>


    <li>

        <a href="photos/image1.jpg" title="screen shot 15">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 16">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 17">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 18">

            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 19">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>

        <a href="photos/image1.jpg" title="screen shot 20">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 21">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image1.jpg" title="screen shot 22">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 23">

            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 24">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    
    <li>
        <a href="photos/image4.jpg" title="screen shot 25">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 26">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 27">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 28">

            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image1.jpg" title="screen shot 29">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 30">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 31">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />

        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 32">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>

        <a href="photos/image5.jpg" title="screen shot 33">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 34">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 35">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>


    
</ul>
	<div id="galleryContainer1" class="section"><div style="position:relative; width:719px; height:594px; background-color:#fff; overflow:visible">
		<div id="item1a" style="position:absolute; left:5.19px; top:5px; width:710px; height:589px; z-index:1">
			<div id="gallery">
<ul>
    <li>
        <a href="photos/image1.jpg" title="screen shot 1">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 2">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 3">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />

        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 4">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>

        <a href="photos/image5.jpg" title="screen shot 5">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 6">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 7">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    
            <li>
        <a href="photos/image1.jpg" title="screen shot 8">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />

        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 9">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>

        <a href="photos/image3.jpg" title="screen shot 10">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 11">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 12">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 13">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />

        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 14">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>


    <li>
        <a href="photos/image1.jpg" title="screen shot 15">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 16">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 17">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>

        <a href="photos/image4.jpg" title="screen shot 18">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 19">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image1.jpg" title="screen shot 20">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 21">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />

        </a>
    </li>

    <li>
        <a href="photos/image1.jpg" title="screen shot 22">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>

        <a href="photos/image2.jpg" title="screen shot 23">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 24">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 25">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 26">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 27">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>

        <a href="photos/image2.jpg" title="screen shot 28">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image1.jpg" title="screen shot 29">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 30">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 31">

            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 32">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image5.jpg" title="screen shot 33">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 34">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 35">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>


    
</ul>
  •         <a href="photos/image1.jpg" title="screen shot 1">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 2">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image3.jpg" title="screen shot 3">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image4.jpg" title="screen shot 4">
    
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image5.jpg" title="screen shot 5">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
    
            <a href="photos/image1.jpg" title="screen shot 6">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 7">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        
                <li>
            <a href="photos/image1.jpg" title="screen shot 8">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 9">
    
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image3.jpg" title="screen shot 10">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
    
        
        <li>
            <a href="photos/image4.jpg" title="screen shot 11">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image5.jpg" title="screen shot 12">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image1.jpg" title="screen shot 13">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 14">
    
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
    
        <li>
            <a href="photos/image1.jpg" title="screen shot 15">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 16">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image3.jpg" title="screen shot 17">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
    
            </a>
    
        </li>
        
        <li>
            <a href="photos/image4.jpg" title="screen shot 18">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
    
            <a href="photos/image5.jpg" title="screen shot 19">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image1.jpg" title="screen shot 20">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 21">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image1.jpg" title="screen shot 22">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
    
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 23">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
    
            <a href="photos/image3.jpg" title="screen shot 24">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image4.jpg" title="screen shot 25">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image5.jpg" title="screen shot 26">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image1.jpg" title="screen shot 27">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
    
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 28">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
    
            <a href="photos/image1.jpg" title="screen shot 29">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 30">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image3.jpg" title="screen shot 31">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
        
        <li>
            <a href="photos/image4.jpg" title="screen shot 32">
    
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
            <a href="photos/image5.jpg" title="screen shot 33">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        
        <li>
    
            <a href="photos/image1.jpg" title="screen shot 34">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    
        <li>
            <a href="photos/image2.jpg" title="screen shot 35">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
    
        </li>
    
    
        
    </ul>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 1">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 2">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 3">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>

        <a href="photos/image4.jpg" title="screen shot 4">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 5">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image1.jpg" title="screen shot 6">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 7">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    
            <li>
        <a href="photos/image1.jpg" title="screen shot 8">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>

        <a href="photos/image2.jpg" title="screen shot 9">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 10">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 11">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 12">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 13">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>

        <a href="photos/image2.jpg" title="screen shot 14">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>


    <li>
        <a href="photos/image1.jpg" title="screen shot 15">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 16">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 17">

            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 18">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image5.jpg" title="screen shot 19">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 20">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>

    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 21">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image1.jpg" title="screen shot 22">

            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 23">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image3.jpg" title="screen shot 24">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>
        <a href="photos/image4.jpg" title="screen shot 25">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 26">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image1.jpg" title="screen shot 27">

            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 28">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image1.jpg" title="screen shot 29">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 30">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />

        </a>
    </li>
    
    <li>
        <a href="photos/image3.jpg" title="screen shot 31">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>

    </li>
    
    <li>

        <a href="photos/image4.jpg" title="screen shot 32">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
    </li>
    
    <li>
        <a href="photos/image5.jpg" title="screen shot 33">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    
    <li>
        <a href="photos/image1.jpg" title="screen shot 34">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
    </li>

    <li>
        <a href="photos/image2.jpg" title="screen shot 35">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />

        </a>
    </li>


    
</ul>

Hope this somehow helps as I mentioned, when I clicked on the red(x), no errors appeared.

Thanks.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

See if you can tweak the order of these so that jquery.js and its
lightbox load after prototype and scriptaculous. That’s where the
problem is happening. The problem happens before noconflict can sort
it out, because the load order is setting up jquery to “win”.

Walter

On Feb 22, 2009, at 8:08 AM, Tonsils wrote:

<script src="Resources/jquery.lightbox-0.5.js"

language=“JavaScript” type=“text/javascript”>


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks again Walter - will try it out and let you know how I go.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Did what you suggested and even managed to remove the error red(x) on the page but unfortunately I can’t seem to get the lightbox component working as when I click on a photo, it overwrites the picture box and opens on a new page.

Lightbox is completely ignored but carousel works.

Here is part of the code again but I think I have to accept that I can’t use the two frameworks together.

<script type="text/javascript">
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
    $j('#gallery a').lightBox();
});
</script>

<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
	background-color: #444;
	padding: 20px;
	width: 94%;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
	border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	border-width: 5px 5px 20px;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>

Thanks for all your help with this Walter.

Tony.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options