Link to home
Start Free TrialLog in
Avatar of phillystyle123
phillystyle123Flag for United States of America

asked on

bootstrap 3: carousel inside modal: images and captions seem randomly not load

I'm using a carousel inside a modal window -both bootstrap 3. The images and captions are generated dynamically. Sometimes the image loads in the modal carousel. Sometimes it doesn't. Same with the caption. I'm guessing this is a load issue. A lot of the image file sizes are pretty big.

I'm wondering if there is a way to tell all of the images to load before the modal can be activated? I'm totally guessing at what the cause is here and I'm in way over my head in terms of javascript/jquery/ajax.

I've tried moving all the js to the head, nothing changes. I've also tried moving the modal code just after the body tag, still nothing changes.  

Here's the page in question: http://ikonltd.com/current/  (click on any thumbnail - keep in mind that this issue is random -sometimes the images/captions load, sometimes they don't and it's just the modal without an image or caption)

Here is the code. 

<cfset crumb="current_exhibition">
<cfset crumb2="current_exhibtion">
<cfset crumb3="">

<!DOCTYPE html> 
<html><cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfparam name="PageNum_newaqimages" default="1">
<cfquery name="newaqimages" datasource="Ikonltd">
SELECT  Title, Date,  sm,med,lg, DescriptionWhole, WebDescriptionLine1, WebDescriptionLine2, WebDescriptionLine3, 
WebDescriptionLine4, WebDescriptionLine5, WebDescriptionLine6, WebDescriptionLine7,  artworknew.AutoArtID, artworknew.ArtistID, FirstName, LastName, Current, Past, permalink FROM artworknew, exhibitionsnew, artistsnew, exbuildernew WHERE exbuildernew.ExID=exhibitionsnew.ExID   and artworknew.ArtistID=artistsnew.ArtistID and  exbuildernew.AutoArtID=artworknew.AutoArtID and Current = "1" and Past = "0" and PublishArt="1"
AND  PublishedStartDate <= <cfqueryparam value="#now()#" cfsqltype="cf_sql_date"> 
AND  PublishedEndDate >=<cfqueryparam value="#now()#" cfsqltype="cf_sql_date">
 ORDER BY OrderID, AutoArtID asc</cfquery>
 
 <cfparam name="PageNum_curreximages" default="1">
<cfquery name="curreximages" datasource="Ikonltd">
SELECT  Title, Date,  sm, DescriptionWhole, WebDescriptionLine1, WebDescriptionLine2, WebDescriptionLine3, 
WebDescriptionLine4, WebDescriptionLine5, WebDescriptionLine6, WebDescriptionLine7,  artworknew.AutoArtID, artworknew.ArtistID, FirstName, LastName, Current, Past, permalink FROM artworknew, exhibitionsnew, artistsnew, exbuildernew WHERE exbuildernew.ExID=exhibitionsnew.ExID   and artworknew.ArtistID=artistsnew.ArtistID and  exbuildernew.AutoArtID=artworknew.AutoArtID and Current = "1" and Past = "0"
 ORDER BY OrderID, AutoArtID asc</cfquery>
 
 <cfquery name="titledates" datasource="Ikonltd">
SELECT exbuildernew.ExID, ExTitle, BeginDate, EndDate, Current, Past FROM exhibitionsnew, exbuildernew WHERE 
exhibitionsnew.ExID = exbuildernew.ExID and Current="1" and Past="0"
</cfquery>

<cfset MaxRows_newaqimages=25>


<cfset StartRow_newaqimages=Min((PageNum_newaqimages-1)*MaxRows_newaqimages+1,Max(newaqimages.RecordCount,1))>
<cfset EndRow_newaqimages=Min(StartRow_newaqimages+MaxRows_newaqimages-1,newaqimages.RecordCount)>
<cfset TotalPages_newaqimages=Ceiling(newaqimages.RecordCount/MaxRows_newaqimages)>
<cfset QueryString_newaqimages=Iif(CGI.QUERY_STRING NEQ "",DE("&"&CGI.QUERY_STRING),DE(""))>
<cfset tempPos=ListContainsNoCase(QueryString_newaqimages,"PageNum_newaqimages=","&")>
<cfif tempPos NEQ 0>
  <cfset QueryString_newaqimages=ListDeleteAt(QueryString_newaqimages,tempPos,"&")>
</cfif>

<cfinclude template="../includes/header.cfm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<TITLE>IKON ltd. - Current Exhibtion: <cfoutput>#titledates.ExTitle#</cfoutput> </TITLE>


<cfinclude template="../includes/bootstrap-header-scripts.cfm">

<!--tool tip js for artist landing page descriptive text painting text rollover-->
<script type="text/javascript">

var baseopacity=100

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
<!--eof tool tip js for artist landing page descriptive text painting text rollover-->



</head>
<body>
<cfinclude template="../includes/masthead_topnav_bootstrap.cfm">

<div class="row">
<article class="col-md-9 col-xs-12 col-md-push-3"><!-- article-->
<div class="row images">

 <CFOUTPUT QUERY="newaqimages" startrow="#StartRow_newaqimages#" maxrows="#MaxRows_newaqimages#">
   <div class="col-lg-2 col-md-6 col-sm-6 col-xs-12 thumblike">
   <figure style="float:left;"><a href="mailto:ikon@ikonltd.com?Subject=re: #FirstName# #LastName#-#Title#" class="btn btn-default btn-xs buttonSpace" rel="tooltip" title="Contact Gallery" role="button">Contact Gallery</a></figure>
   <figure style="float:right;"><a href="/current/enlarged/#AutoArtID#/#currentRow#/" class="btn btn-default btn-xs buttonSpace" rel="tooltip" title="Contact Gallery" role="button">Full Size Image</a></figure>
            <a class="imgPop" title="<b>#newaqimages.FirstName# #newaqimages.LastName#<br><i>#newaqimages.Title#</i></b><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#" href="##" onMouseover="showtext('<b>#newaqimages.FirstName# #newaqimages.LastName#<br><i>#newaqimages.Title#</i></b><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#')" onMouseout="hidetext()"><img src="http://ikonltd.com/images/lg/#newaqimages.lg#" border="0" class="thumbnail img-responsive pull-left lazy"></a><aside class="caption pull-right">
<b>#newaqimages.FirstName# #newaqimages.LastName#<br><i>#newaqimages.Title#</i></b><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#
                     <p class="buttonSpace"> 
                    <a href="mailto:ikon@ikonltd.com?Subject=re: #FirstName# #LastName#-#Title#" class="btn btn-default btn-xs buttonSpace" rel="tooltip" title="Contact Gallery" role="button">Contact Gallery</a>
                    <a title="<b>#newaqimages.FirstName# #newaqimages.LastName#<br><i>#newaqimages.Title#</i></b><cfif '#newaqimages.Date#' eq ""><cfelse><br></cfif>#newaqimages.Date#<cfif '#newaqimages.WebDescriptionLine1#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine1#<cfif '#newaqimages.WebDescriptionLine2#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine2#<cfif '#newaqimages.WebDescriptionLine3#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine3#<cfif '#newaqimages.WebDescriptionLine4#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine4#<cfif '#newaqimages.WebDescriptionLine5#' eq ""><cfelse><br></cfif>#newaqimages.WebDescriptionLine5#" href="##" class="btn btn-default btn-xs buttonSpace thumbnail" rel="tooltip" role="button">More Detail</a>
                    
                    </p>
</aside><!--end caption-->


  
   </div><!--end thumb col-->
  
      </cfoutput>
  </div><!--end row for image grid-->
  
  <!--modal html-->
<div class="modal" id="myModal" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
	<div class="modal-header">
		<button class="close" type="button" data-dismiss="modal">×</button>
		<h3 class="modal-title"></h3>
	</div>
	<div class="modal-body">
       		<div id="modalCarousel" class="carousel">
          <div class="carousel-inner"></div>
                   <a class="carousel-control left" href="#modalCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
   </div>
  </div>
</div>
<!--/modal html-->
 
<!--paginiation for new acquisitions landing page-->
 <div style="width:100%; float:left;">
 <p align="center"><b><cfoutput>#StartRow_newaqimages# - #EndRow_newaqimages#  of #newaqimages.RecordCount#</cfoutput></b><br>
                                
<cfif PageNum_newaqimages GT 1>
                                  <a href="<cfoutput>/current/#Max(DecrementValue(PageNum_newaqimages),1)#/</cfoutput>"> 
                                  <b><< Previous Group</b></a> 
                                
</cfif>
 
<cfif PageNum_newaqimages GT 1 and PageNum_newaqimages LT TotalPages_newaqimages>
<b>|</b>
</cfif>
                                
<cfif PageNum_newaqimages LT TotalPages_newaqimages>
                                  <a href="<cfoutput>/current/#Min(IncrementValue(PageNum_newaqimages),TotalPages_newaqimages)#/</cfoutput>"><b>Next 
                                  Group >></b></a> 
                                
</cfif>
                              </p>
							  </div>
<!--eof paginiation for new acquisitions landing page-->
</article><!--end article-->
<cfinclude template="../includes/bootstrap_exhibition_sidenav.cfm">


</div><!--eof .row-->
</div><!--eof container-->




 


<!--new footer includes-->
<cfinclude template="../includes/bootstrap-footer-scripts.cfm">
<!--end new footer includes-->
<script src="http://ikonltd.com/js/jquery.mobile.custom.min.js"></script>

<script type="text/javascript">
    /* copy loaded thumbnails into carousel */
$('.row .thumbnail').click(function(e){
    e.preventDefault();
  
}).each(function(i) {
  if(this.complete) {
  	var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
    
    item.attr("title",title);
  	$(itemDiv.html()).appendTo(item);
  	item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
  	var id = parseInt(idx);
  	$('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
  	
});

    </script>
    
    <script type="text/javascript">
$(document).ready(function() {
$("#modalCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#modalCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script> 

</body>
</html>

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
I suspect your problem is here
}).each(function(i) {
  if(this.complete) { // HERE
  	var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
    
    item.attr("title",title);
  	$(itemDiv.html()).appendTo(item);
  	item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

Open in new window


If the complete is false then that item is skipped.

Try taking that out for now and see if that works. If so you might want to look at your pre-loading code.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

Will try-I'm not using a preload script-any suggestions?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
There are many options available - but lets see what happens by removing the .complete test.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Apologies for irrelevant post - posted to wrong thread.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

removing the complete conditional causes the modal to load random images  - if i put it back, the correct image is loaded into the modal
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
I don't get any images at all - before change or now. Modal is empty.

I suspect the reason is my browser is taking longer to load those images so the complete is preventing them from loading.

The best way we are going to solve this is if you explain how this page is supposed to work and lets take it from there.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

I'm not sure what u mean by how the page is supposed to work-anything specifically?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
What is it you are trying to achieve?
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

The functionality for the page is already up and running. Click on a thumb, the bootstrap modal with carousel pops up with an enlarged version of the image and you can swipe/navigate through the rest of the photos while the modal live. This is already what it's doing. The issue is that sometimes the images and captions don't load, sometimes they do. Here's the link again: http://ikonltd.com/current/
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
The functionality for the page is already up and running ... This is already what it's doing.
It is working now - previously when I went to that link - modal was empty.

Question: why are you building the content of the modal dynamically. If it is just going to show the same images that are thumbs on the page already - why not simply create the markup for the modal at the same time?
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

I think that's what I'm already doing. I'm only outputting the images once then using them in the modal and for the thumbs
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Nope - here is the source for your modal-body
<div class="modal-body">
       		<div id="modalCarousel" class="swipeThis carousel">
          <div class="carousel-inner"></div>

Open in new window

As you can see carousel-inner is empty.

The javascript you posted in your second post shows where you are populating your carousel-inner.

The question is - why don't you just populate the carousel-inner with the images at the same time you create the page?
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

Hmm- I see what you mean. I feel like there is a reason why -I've been working on this for so long I've forgetten. I think it may be for the page to load faster -especially with mobile?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
It won't affect page load. The images in the modal are the same as the ones on the page - once loaded the image is cached and is not loaded again - the only difference will be a slightly larger download file - but the additional text will be marginal.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

but what about populating the carousel starting with the thumbnail that is clicked on? That's what this code does, right? 
<script type="text/javascript">
    /* copy loaded thumbnails into carousel */
$('.row .thumbnail').click(function(e){
    e.preventDefault();
  
}).each(function(i) {
  if(this.complete) {
  	var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
    
    item.attr("title",title);
  	$(itemDiv.html()).appendTo(item);
  	item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
  	var id = parseInt(idx);
  	$('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
  	
});

    </script>

Open in new window

Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

Wondering if this solved the issue - notice the .on('load' -aside from that it's almost identical to what I've been using. I got it here: http://www.bootply.com/nhUsQXSibV.

Seems like it's reloading before the modal is active. A bit clunky in my tablet, but seamless on my phone. 

/* copy loaded thumbnails into carousel */
$('.row .thumbnail').on('load', function() {
  
}).each(function(i) {
  if(this.complete) {
  	var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
    
    item.attr("title",title);
  	$(itemDiv.html()).appendTo(item);
  	item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
  	var id = parseInt(idx);
  	$('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
  	
});

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
The problem with your earlier code was this line

 if(this.complete) { // HERE

Open in new window


If an image had not finished loading when you clicked a thumbnail it would be left out.

With respect to not loading the modal before - it does not matter if you do - this line ensures that the carousel slides to the correct image 
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
        var id = parseInt(idx);
        $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected <=== HERE
        
});

Open in new window


So while the code above works (but not because of the .on('load') (nothing wrong with doing it this way) but because you have removed the check for .complete.

What was happening in your original code was this
Click thumbnail
Run JQuery - loop through all thumbnail images.
Check if image is complete loading - if yes - add it to the carousel
If not ignore and continue to the next image (this image is then lost and is not displayed in the carousel).

Making sense?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Ultimately though it still makes sense to generate the modal content at the time the page is rendered.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

I'm not sure about that-the carousel inside the modal makes things more complicated
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

This line IS in the updated code:

if(this.complete) { // HERE
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Missed that - I have added code tags to help make code more readable.

The .complete is superfluous in this context anyway because it will never be false.

There is a problem with the .on(load) - if the code runs after the images there is a chance some images will load before the code starts and you could still miss images. Even by putting the code before the image elements there is still a chance you will miss one. There are ways of getting around this but it is unnecessarily complicated.

If you want to go with a javascript load then how about this
$(function() {

	$('.row .thumbnail').each(function(i, o) {
		$('#myModal .carousel-inner').append(
			$('<div/>').addClass('item').append($(this).clone())
		);
	})
});

Open in new window


The code runs in the document ready state so images should be loaded by then.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

thanks! -i'm going to try this-i've been using a css only preload that doesn't seem to be working. should i put it in the footer after the other modal js or in the head?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
This code can go anywhere.
Before </body> is standard
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

That's what I did, thanks. I'm still noticing a load issue every once in a while -where the modal pops up but is not populated with an image or the correct image. Any thoughts?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

I'll give the server side modals more thought. aside from that,you are suggesting getting rid of ".on(load)" and using the preload script you provided instead, yes?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
Yes. The on(load) is not guaranteed to deliver the result you want.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

Here it is, but it worked in IE before I applied the bootstrap framework:

<!--tool tip js for artist landing page descriptive text painting text rollover-->
<script type="text/javascript">

var baseopacity=100

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script>

Open in new window

Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

Ah, yes. thanks for pointing that out.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

thanks julianH - really appreciate the help. Here's what I ended up using:

$(function() {

      $('.row .thumbnail').each(function(i, o) {
            $('#myModal .carousel-inner').append(
                  $('<div/>').addClass('item').append($(this).clone())
            );
      })
});


then this in the footer, just above the </body> tag:

<script type="text/javascript">
 /* copy loaded thumbnails into carousel */
$('.row .thumbnail').click(function(e){
 
}).each(function(i) {
  if(this.complete) {
        var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
   
    item.attr("title",title);
        $(itemDiv.html()).appendTo(item);
        item.appendTo('.carousel-inner');
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
        var id = parseInt(idx);
        $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
        
});

    </script>
   
       

      <script type="text/javascript">
$(document).ready(function() {
$(".swipeThis").swiperight(function() {
$(this).carousel('prev');
});
$(".swipeThis").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
You are most welcome - good luck with your project.
Avatar of phillystyle123
phillystyle123
Flag of United States of America image

ASKER

Thanks!