Questions about Bootstrap

[nyxmidnight]

You have too many containers, my friend! And you're missing a few closing divs as well.

Code: Select all

						<div id="myCarousel" class="carousel slide" data-ride="carousel">
					      <!-- Indicators -->
					      <ol class="carousel-indicators">
					        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					        <li data-target="#myCarousel" data-slide-to="1"></li>
					        <li data-target="#myCarousel" data-slide-to="2"></li>
					      </ol>
					      <!-- Wrapper for slides -->
					      <div class="carousel-inner" role="listbox">
					        <div class="item active">
					          <img src="#" alt="First slide">
					            <div class="carousel-caption">
					              <h4>Welcome!</h4>
					              <p>We are Cleveland County Choral Society, providing concerts twice a year in Shelby, North Carolina.</p>
					           		<p><a class="btn btn-lg btn-primary" href="#" role="button">More about us</a></p>
					            </div> <!-- .carousel-caption -->
					          </div> <!-- .item .active -->
					        <div class="item">
					          <img src="#" alt="Second slide">
					            <div class="carousel-caption">
					              <h1>Concerts</h1>
					              <p>Our 2014 concerts are December 6th and 7th at Aldergate Methodist Church in Shelby, NC.</p>
					           <p><a class="btn btn-lg btn-primary" href="#" role="button">Concert times and ticket prices</a></p>
					            </div> <!-- .carousel-caption -->
					        </div> <!-- .item -->
					        <div class="item">
					          <img src="#" alt="Third slide">
					            <div class="carousel-caption">
					              <h1>Media</h1>
					              <p>Browse our pictures and see videos from previous concerts!</p>
					              <p><a class="btn btn-lg btn-primary" href="#" role="button">See more</a></p>
					            </div> <!-- .carousel-caption -->
					          </div> <!-- .item -->
					        </div> <!-- .carousel-inner -->
					        <!-- Controls -->
					      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
					        <span class="glyphicon glyphicon-chevron-left"></span>
					        <span class="sr-only">Previous</span>
					      </a>
					      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
					        <span class="glyphicon glyphicon-chevron-right"></span>
					        <span class="sr-only">Next</span>
					      </a>
					     </div> <!-- #myCarousel -->

As for question #2, I need to know where the php files are. What is your directory structure? Something like this?

Code: Select all

php files (CCCS)
|_bootstrap.3.2.0.dist
|__css
|__img

If so, your images should be referred to as "img/image.jpg".

[Robin]

@Nyx Yep, that's how the directory files are situated! I used that link structure and it worked great.

Also, I put in the new carousel code and it works great as well. I actually copy-pasted the original code from one of the Bootstrap templates so that I could figure out how it worked...must have not copypasta'ed all the code I was supposed to ^_^;

Thank you so much, Nyx! I swear I'll get the hang of this someday ^_^;

[nyxmidnight]

Don't worry about it. We all gotta start somewhere!

[Robin]

One last thing and I'll have my whole Bootstrap site built ^o^ finally, right? :D :D :D

I've been looking at this responsive Bootstrap image gallery tutorial to build my own image gallery. I'm pretty ok with coding most of it (YAY!), but I'm using thumbnails to make sure all the images are the same size and don't screw up the page layout. Ideally, visitors would click a thumbnail and the jQuery lightbox would open up to show the larger picture.

However, I don't see a part in any of the code where I can include both the thumbnail image source and the actual larger image source. Do I need to look up another tutorial, or would this one be adaptable to what I need?

[nyxmidnight]

You don't need a thumbnail! Basically the class .img-responsive makes your images scale in different resolutions. For example! If your image has the responsive class and your grid is col-lg-2, the image will be 100% of the width of two BS columns, and the height will be proportional.

At least that's my understanding of it.

[Robin]

Ah ok! What about if the source images are different heights and widths? I was reading the comments on that tut and a few people made mention of differently-sized images throwing the responsive image gallery off. (Thus, why I made thumbnails just in case)

[nyxmidnight]

I am honestly not sure! I am looking at a Lightbox plugin built over the Bootstrap modal that the bootstrap official site links to, but I can't test these things at work so it will have to wait. However, like you want to do, it uses separate thumbnails and image files.

[Robin]

Ooooooooo shinyyyy. That could potentially work! ^_^ will look at it more after sleep :)

[nyxmidnight]

No problem. Keep us posted!

[Robin]

OK! Got the photo gallery done! (I didn't end up using the plugin for this project, because it seemed way too complicated for me to learn right yet--but I have it bookmarked for after I have a better command of Bootstrap ^_^)

Here is the finished project!!! Everything works and looks good!!!

(EDIT: Photo gallery still does weird things with image sizing, but overall it works well.)

THANK YOU NYX!! Could not have put this site together without your help!! :D :D