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

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
0
phillystyle123Author Commented:
Will try-I'm not using a preload script-any suggestions?
0
Julian HansenCommented:
There are many options available - but lets see what happens by removing the .complete test.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Apologies for irrelevant post - posted to wrong thread.
0
phillystyle123Author Commented:
removing the complete conditional causes the modal to load random images  - if i put it back, the correct image is loaded into the modal
0
Julian HansenCommented:
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.
0
phillystyle123Author Commented:
I'm not sure what u mean by how the page is supposed to work-anything specifically?
0
Julian HansenCommented:
What is it you are trying to achieve?
0
phillystyle123Author Commented:
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/
0
Julian HansenCommented:
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?
0
phillystyle123Author Commented:
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
0
Julian HansenCommented:
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?
0
phillystyle123Author Commented:
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?
0
Julian HansenCommented:
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.
0
phillystyle123Author Commented:
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

0
phillystyle123Author Commented:
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

0
Julian HansenCommented:
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?
0
Julian HansenCommented:
Ultimately though it still makes sense to generate the modal content at the time the page is rendered.
0
phillystyle123Author Commented:
I'm not sure about that-the carousel inside the modal makes things more complicated
0
phillystyle123Author Commented:
This line IS in the updated code:

if(this.complete) { // HERE
0
Julian HansenCommented:
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.
0
phillystyle123Author Commented:
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?
0
Julian HansenCommented:
This code can go anywhere.
Before </body> is standard
0
phillystyle123Author Commented:
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?
0
Julian HansenCommented:
I notice you are still using this code
// This is not guaranteed to fire for every image
// It is very possible that an image will get missed
$('.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');
    }
  }
});

Open in new window


As I mentioned in my earlier post the .on(load) approach is highly susceptible to loosing images.

I still believe the best solution here is to populate the modal at page render time - backend - not with javascript. The only reason to do it with javascript is if there is something that can happen on the client side that can change the outcome of what happens. In your case the modal is the same irrespective of what you do - so I would seriously consider rendering server side.

If you are dead set on the javascript method then rather use the approach I posted earlier - rather than the .on(load)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
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?
0
Julian HansenCommented:
Yes. The on(load) is not guaranteed to deliver the result you want.
0
phillystyle123Author Commented:
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

0
Julian HansenCommented:
0
phillystyle123Author Commented:
Ah, yes. thanks for pointing that out.
0
phillystyle123Author Commented:
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>
0
Julian HansenCommented:
You are most welcome - good luck with your project.
0
phillystyle123Author Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.