Hi all,
I'm making a portfolio template that i wanna use for a few photography websites. I'm running into a glitch i'm using bootstrap and some modal/carousel functions that i found on bootply that were simplified. it's works in theory but i'm having issue with the load. when i go to view the large image via click on the thumbnail (currently gallery 1 is live) the image doesn't load, UNLESS i reload the page. i'm using jquery 1.11.0 and here is the javascript in my main.js file. I think i'm missing something very simple but i'm just not seeing it.
- /* copy loaded thumbnails into carousel */
- $('.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 */
- $('.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
-
- });