We’ve included a simple way to display a great-looking, shareable photo gallery. Just copy and paste the following code into an HTML module and edit to your liking:
- <div class="full-width portfolio portfolio-four"><!-- Navigations for categoery class="active shows active category. <a data-filter=".Category1" can be used for categoery its can be any as you wish just make sure you are suing it same for portfolio-item -->
- <ul class="portfolio-tabs clearfix">
- <li class="active"><a data-filter="*" href="#">All</a></li>
- <li><a data-filter=".Category1" href="#">Category 1</a></li>
- <li><a data-filter=".Category2" href="#">Category 2</a></li>
- <li><a data-filter=".Category3" href="#">Category 3</a></li>
- <li><a data-filter=".Category4" href="#">Category 4</a></li>
- <li><a data-filter=".Category5" href="#">Category 5</a></li>
- <li><a data-filter=".Category6" href="#">Category 6</a></li>
- </ul>
- <!-- Categoery end --> <!-- Portfolio content / start All content should be under <div class="portfolio-wrapper" -->
- <div class="portfolio-wrapper"> <!-- Portfolio content /imagestart<div class="portfolio-item Category3 " Category3 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this-->
- <div class="portfolio-item Category3 ">
- <div class="image"><a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="video_screen2" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-1.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Donec Ornare Turpis Eget" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Donec Ornare Turpis Eget" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Donec Ornare Turpis Eget</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category1 " Category1 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category1 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="Screen Shot 2012-06-01 at 3.51.37 PM" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-3.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --><a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Mauris Fringilla Voluts" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Mauris Fringilla Voluts" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Mauris Fringilla Voluts</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category1 " Category1 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category2 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="bla" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-5.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Proin Sodales Quam" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Proin Sodales Quam" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Proin Sodales Quam</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --><!-- Portfolio content /imagestart<div class="portfolio-item Category2 " Category2 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category4 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port3" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-7.jpg" /> </a>
- <div class="image-extras"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup -->
- <div class="image-extras-content"> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Nam Viverra Euismod" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Nam Viverra Euismod" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Nam Viverra Euismod</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category4 " Category4 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category5 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="DSBE" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-11.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --><a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur Malesuada Lorem" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur Malesuada Lorem" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Curabitur Malesuada Lorem</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category5 " Category5 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category6 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port_slide_4" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-9.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Suspendisse Pharetra Urna" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Suspendisse Pharetra Urna" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Suspendisse Pharetra Urna</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category6 " Category6 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category2 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port_slide_10" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-6.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Quisque Sit Amet Unte" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Quisque Sit Amet Unte" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Quisque Sit Amet Unte</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category2 " Category2 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category3 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="video_screen3" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-2.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Morbi Inta Nisiut" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Morbi Inta Nisiut" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Morbi Inta Nisiut</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category3 " Category3 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category1 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="full_width" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-4.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vestibulum Sodales Ante" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vestibulum Sodales Ante" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Vestibulum Sodales Ante</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category1 " Category1 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category4 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port_slide_12" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-8.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vivamus Semper Euismod" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vivamus Semper Euismod" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Vivamus Semper Euismod</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category4 " Category4 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category5 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="Nike_shoe_3_by_gormelito" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-12.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Ligula Urna Varius" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Ligula Urna Varius" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Ligula Urna Varius</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category5 " Category5 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
- <div class="portfolio-item Category6 ">
- <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="Screen Shot 2012-06-01 at 3.51.37 PM" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-10.jpg" /> </a>
- <div class="image-extras">
- <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur In Tristique" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur In Tristique" src="/portals/0/images/finder-ico.png" /></a>
- <h3>Curabitur In Tristique</h3>
- <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
- </div>
- </div>
- </div>
- </div>
- <!-- Portfolio content /image End --> </div>
- </div>