It uses 4 big pictures (1200x500) put in an folder called img then uses those pics for the thumbnails too.
So if anyone wants to play around with it?
Temporay Gallery Test Example
Temporay Gallery Zip Download
What I want to do eventually is get the containers done so I can float the
paragraph that I have coming from the pictures alt tag below for small
screens and over the image on large screens like I did with the orbit carousel
So if anyone wants to fool around with that part
I'm going to write a bit more script maybe to add an active class for the thumbs
so when you select them the border stays a changed color on the thumbs
Anyway I put a picture in a column gave it the ID bigpic
and to the id made it 100% width then added the class thumb
that's where it's tricky all the images need the thumb class
so you have to apply style to the ID & the class separately
I put a paragraph below it and gave it the ID description
and edited it to say 1st picture description
gave it the class gallery-description to style it
That changes by using the pictures alt tags
Then I add a container and gave it the class thumbnails
In it I added a picture gave it the class thumb
For it's alt I used 1st image description
duplicated it 3 time and changed the images and alt tags
On the container used Flex Direction Row and justify Space around
In the FOOTER slapped this script:
<script>
$('.thumbnails img').click(function(){
var thumbSrc = $('.thumb').children('img').attr('src');
var largeSrc = $('div#bigpic img').attr('src');
$('div#bigpic img').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
$('#description').html($(this).attr('alt'));
});
</script>
That gets the the pictures with the class thumb and puts them in the bigpic image then uses the alt for the description. $('.thumbnails img').click(function(){
var thumbSrc = $('.thumb').children('img').attr('src');
var largeSrc = $('div#bigpic img').attr('src');
$('div#bigpic img').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
$('#description').html($(this).attr('alt'));
});
</script>
Eventually I'll get it done and up as a step by step tutorial.
Nice having the proper src, now we can do normal stuff like this.
