-
That’s not an easy thing to do, however the next version of this theme will have the feature to support an unlimited number of slides.
If you are in a hurry to implement this feature try asking the creator of the site above.
actually, lol.. not that bad…can be done with CSS and one quick change to Loop-slider.php
ok, so, first go to loop-slider.php under editor section… (note: haven’t tested a lot of text content in slides, but seems to be fine.)your looking for
‘posts_per_page’ => 4′
change it to the number you would like to have….so 4 to 7make sure you have enough posts…if not publish a couple test posts…
next,
go to style.css still in editor…find:
#ajax-content {
position:relative;
max-width:1140px;
margin:0 auto;
}change max width to:
#ajax-content {
position:relative;
max-width:940px;
margin:0 auto;
}next find:
#slides {
margin:0 auto;
overflow:hidden;
}add max-width:940px;
so it should look like:#slides {
margin:0 auto;
overflow:hidden;
max-width:940px;
}lastly, take your total number of slides you intend on having and divide 940 by that number…id round down if you get a decimal.. write it down…
in css find
.kwicks .slide {
float:left;
display:block;
width:230px;
height:410px;
overflow:hidden;
-moz-box-shadow:0px 0px 30px #000;
-webkit-box-shadow:0px 0px 30px #000;
box-shadow:0 0 30px #000;
}change the width from 230 to the number you wrote down… save, and that should be it..
it seems as though kwicks.js pulls in the values that you enter from css.. .. Ughh… its late i dont know.. any way, if you have a problem, let me know, and post a link so i can see it…
please let me know if I’m missing something…
gavintfn; Thank you for taking the time to write those detailed instructions. Without that information, I would not have had a clue as to what to look for.
Using those directions, it did indeed shrink the individual images, but it did not change the number of images, so I still had 4, now narrower images in the center of the first page with the arrow pointing to the next page on the right side of the screen.
But with the info you gave I found another instance of “posts_per_page” in functions.php. Bingo! This overrides the default value of images per page. The only other thing I needed to change was the width setting of the .kwicks .slide section of the Stylesheet (style.css), and I was done.
I did not need to make any changes to the #ajax-content or #slides settings; in fact when I did, the expanded image did not display properly, cutting of either side of the images off along with the included text.
So in short, here is how I changed the number of images displayed on a single page of the image gallery:
Go to the Theme Functions (functions.php)
Find the section that looks like this:
* Overrides the default posts_per_page value when viewing in gallery mode
* This prevents the 404 flag from being triggered when using query_posts() with pagination
* It does not alter the database value for the option, only fiters it when the posts query is called
*
* @since Minimatica 1.0
*/
function minimatica_paged_posts( $query ) {
if( (
( $query->is_home() && ‘gallery’ == minimatica_get_option( ‘homepage_view’ ) ) ||
( $query->is_category() && ‘gallery’ == minimatica_get_option( ‘category_view’ ) ) ||
( $query->is_tag() && ‘gallery’ == minimatica_get_option( ‘tag_view’ ) ) ||
( $query->is_author() && ‘gallery’ == minimatica_get_option( ‘author_view’ ) ) ||
( $query->is_archive() && ‘gallery’ == minimatica_get_option( ‘archive_view’ ) )
) && ( ! is_single() )
)
$query->set( ‘posts_per_page’, ‘4’ );
}Change the number 4 in: $query->set( ‘posts_per_page’, ‘4’ ); to whatever number of images you want to display (in my case 12; yes, I was able to get 12 images to display very nicely).
Then go to: Stylesheet (style.css)
Find the section that looks like this:
.kwicks .slide {
float:left;
display:block;
width:230px;
height:410px;
overflow:hidden;
-moz-box-shadow:0px 0px 30px #000;
-webkit-box-shadow:0px 0px 30px #000;
box-shadow:0 0 30px #000;Adjust the width from 230px to find what makes it look right, lowering the number for more images, and increasing it for fewer images.
You can find how it turned out for me at:
Hope this helps.
Daniel, I must take the time to thank you for this wonderful theme. When I couldn’t make my 12 images display the way I wanted them to on a single page, I toyed with using the Sliding Door theme, but I kept returning to your Minimatica theme because of it’s simple beauty and elegance; and I’m so glad I did.
Your work and generosity is much appreciated!
PCCh, site looks great!! a few little notes, I would push your text content in each slider a little up, and a little right, to line up with the text on each image..use margins… you can do that in style.css i already figured it out for you… here ya go..
.kwicks .post .entry-container {
position: absolute;
bottom: 0;
padding: 10px;
margin: 10px 10px 18px 35px;
background: url(images/entry.png);
display: none;also, maybe put all of your page titles in a drop down, instead of listed out, and move the nav to the top of the page…
something like this:http://www.yellowrootllc.com/site2
site that i test stuff out with…
if you want to do that i wrote a walkthrough on here a couple months ago… if ya cant find it, i can re-type it up quickly..but slider is sick! great job, thanks for finding my neglected portion!!.. Good job.
gavintfn; WOW… a few tiny changes made such a big difference in the look of my slider. Thank you so much!
Your site(s) look spectacular; you are obviously a very talented designer.
I did some searching for your walkthrough on moving and designing a drop down menu but was unable to find it.
I agree, consolidating my items into, say, 4 major content areas would make the navigation much cleaner. And placing it up in or around the header would be ideal.
Your drop down on the test site is beautiful, with the changing colors of the words, translucent background of the drop down area, and, of course, everything bouncing.
I cannot do that myself (at least not yet ;), but I will be looking into other options. If you could at some point repost the directions on how to do that sometime, it would be much appreciated.
Scott
@gavintfn
Greate site gavintfn. How did you apply the webkit filter on your pictures, manually?my site:
Pcch and guenes…
sorry, been super busy… anyway.. guenes, the images just loaded and run through a gray scale, then they release the grayscale on mouseover and reapply on mouse out. a little java… anyway, here are the directions..btw… do not include the backticks before and after the code. they are the backwards apostrophes… 1st time i have used paste bin..my bad…
http://pastebin.com/yKwSghUBPcch… thanks for the compliment…i think my designing is horrible..lol..but anyway… heres your answer…
let me know if ya need more help..
Thanks for the hints gavintfn, with your help i was able to apply the same web-kits filter on my new site.
guenes.. good job… Im glad you were able to figure it out… I was sure i missed something…
site looks great…heres a couple small css stuff you might like.. unless noted find and replace. in css file dont add in my little notes..that have the asterisks…
#slides {
margin: 0 auto;
overflow: hidden;
box-shadow: 2px 3px 30px 5px rgba(3, 3, 3, 0.66);
-webkit-box-shadow: 2px 3px 30px 5px rgba(3, 3, 3, 0.66);
-moz-box-shadow: 2px 3px 30px 5px rgba(3, 3, 3, 0.66);
transition: box-shadow .3s;
-moz-transition: -moz-box-shadow 0.3s;
-webkit-transition: -webkit-box-shadow 0.3s;
}***need to ad next***
#slides:hover {
position: relative;
box-shadow: 0px 0px 25px 12px rgba(9, 7, 7, 0.83);
-webkit-box-shadow: box-shadow: 0px 0px 25px 12px rgba(9, 7, 7, 0.83);
-moz-box-shadow: box-shadow: 0px 0px 25px 12px rgba(9, 7, 7, 0.83);
}***long one***
#slider {
position: relative;
height: 410px;
padding: 30px 0 30px 0;
margin-bottom: 20px;
-moz-box-shadow: 0px 0px 20px #070404;
-webkit-box-shadow: 0px 0px 20px #070404;
box-shadow: inset 0px -3px 20px #070404;
border-bottom: 1px solid rgba(221, 221, 221, 0.3);
background -image: -moz-linear-gradient(top, rgba(22,22,22,0.3) 0%, rgba(195,195,195,0.3) 25%, rgba(229,229,229,0.32) 30%, rgba(238,238,238,0.35) 37%, rgba(246,246,246,0.37) 43%, rgba(255,255,255,0.4) 50%, rgba(246,246,246,0.37) 57%, rgba(236,236,236,0.35) 65%, rgba(229,229,229,0.32) 70%, rgba(191,191,191,0.3) 75%, rgba(2,2,2,0.3) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,0.3)), color-stop(25%,rgba(195,195,195,0.3)), color-stop(30%,rgba(229,229,229,0.32)), color-stop(37%,rgba(238,238,238,0.35)), color-stop(43%,rgba(246,246,246,0.37)), color-stop(50%,rgba(255,255,255,0.4)), color-stop(57%,rgba(246,246,246,0.37)), color-stop(65%,rgba(236,236,236,0.35)), color-stop(70%,rgba(229,229,229,0.32)), color-stop(75%,rgba(191,191,191,0.3)), color-stop(100%,rgba(2,2,2,0.3))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(22,22,22,0.3) 0%,rgba(195,195,195,0.3) 25%,rgba(229,229,229,0.32) 30%,rgba(238,238,238,0.35) 37%,rgba(246,246,246,0.37) 43%,rgba(255,255,255,0.4) 50%,rgba(246,246,246,0.37) 57%,rgba(236,236,236,0.35) 65%,rgba(229,229,229,0.32) 70%,rgba(191,191,191,0.3) 75%,rgba(2,2,2,0.3) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(22,22,22,0.3) 0%,rgba(195,195,195,0.3) 25%,rgba(229,229,229,0.32) 30%,rgba(238,238,238,0.35) 37%,rgba(246,246,246,0.37) 43%,rgba(255,255,255,0.4) 50%,rgba(246,246,246,0.37) 57%,rgba(236,236,236,0.35) 65%,rgba(229,229,229,0.32) 70%,rgba(191,191,191,0.3) 75%,rgba(2,2,2,0.3) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(22,22,22,0.3) 0%,rgba(195,195,195,0.3) 25%,rgba(229,229,229,0.32) 30%,rgba(238,238,238,0.35) 37%,rgba(246,246,246,0.37) 43%,rgba(255,255,255,0.4) 50%,rgba(246,246,246,0.37) 57%,rgba(236,236,236,0.35) 65%,rgba(229,229,229,0.32) 70%,rgba(191,191,191,0.3) 75%,rgba(2,2,2,0.3) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(22,22,22,0.3) 0%,rgba(195,195,195,0.3) 25%,rgba(229,229,229,0.32) 30%,rgba(238,238,238,0.35) 37%,rgba(246,246,246,0.37) 43%,rgba(255,255,255,0.4) 50%,rgba(246,246,246,0.37) 57%,rgba(236,236,236,0.35) 65%,rgba(229,229,229,0.32) 70%,rgba(191,191,191,0.3) 75%,rgba(2,2,2,0.3) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#4d161616′, endColorstr=’#4d020202′,GradientType=0 ); /* IE6-9 */
}.nav ul li a {
display: inline-block;
padding: 5px 0;
color: #E2D0CF;
text-decoration: none;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.92);
transition: text-shadow .4s ease-in-out;
-webkit-transition: text-shadow .4s;
-moz-webkit-transition: text-shadow .4s;
}***need to add this one..**
#primary-nav ul li a:hover {
text-shadow: 2px 2px 1px black,0px -4px 50px rgba(235, 235, 235, 1), -3px 1px 30px rgba(235, 235, 235, 0.96), 0px 4px 30px rgba(236, 236, 236, 0.97);
transition: text-shadow .4s;
-webkit-transition: text-shadow .4s;
-moz-transition:text-shadow .4s;
color: white;
}#header img {
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
max-width: 100%;
box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.86);
-moz-box-shadow:0px 0px 14px 3px rgba(0, 0, 0, 0.86);
-webkit-box-shadow:0px 0px 14px 3px rgba(0, 0, 0, 0.86);
border-bottom: 1px solid rgba(204, 204, 204, 0.25);
}My gosh, gavintfn! You really go the extra mile to help people out. Those are very detailed instructions you have given for the menu, and I am looking forward to learning something more about css in applying them.
I ended up inserting a traditional menu bar on my site, but I will try yours out soon.
guenes:
How did you get your first picture to be stagnant or open when your website opens up at the following website?
Thanks,
Allison
You must be logged in to reply to this topic.