I am content with my current theme but the photosets are not laying out properly, they are the same width with my photos but say for instance i reblog a photoset with the photos side by side, it wont show up that way on my blog it will show up underneath each other and that is very frustrating since it makes the images blury.
This is my photoset html code. Is there anyway to correct this?
</div>
{/block:Photo}
{block:Photoset}
<div class="entry">
<div class="photosetbox">
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:IndexPage}
<div class="photosett">
{block:Date}
{block:NoteCount}{NoteCountWithLabel} • {/block:NoteCount}{12Hour}:{Minutes} {CapitalAmPm}
{/block:Date}
</div>
<div class="photoset_a">
</div>
{/block:IndexPage}
</div>
Photoset Photos
Your current code specifies that you want each photo from photoset to rendered in the html as an img tag:
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
To render a photoset, you have two options. Either use the built in feature / theme operator. This will give you an iframe with a photoset prebuilt inside it:
{Photoset-700}
Or use a plugin to take your current code and turn it into a photoset.
References
Tumblr Theme Operators - Photosets
Photoset Grid jQuery Plugin
Related
I am not a programmer or site designer and I have searched everywhere for a solution. My website template works fine but my blog page is black background. There is black background in the template but all pages have a white background in the body. Only the first page you see when you click the blog menu item is black. Please help. website is www.tfabfitness.com
From the looks of it your content on your blog page is contained by the CSS class bgblackbottom. This class is for your footer, and as youcan see on that page it does not span the full width. The divs are not placed correctly and should be setup as follows:
<div class="row">
<div class="twelve columns">
<div class="blog"">
{blog content}
</div> <!--Closing tag for blog-->
</div> <!--Closing tag for twelve columns-->
</div> <!--Closing tag for row-->
<div class="bgblackbottom">
{footer content}
</div> <!--Closing tag for bgblackbottom-->
currently the footer is contained within the row class which is styling it as content and not a footer.
I want to use the bootstrap half-slider carousel and I am using codeigniter. In it, it used <div> with background-image instead of <img>, like this
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
In my view used it like this:
<div class="fill" style="background-image:url('../assets/images/image1.jpg')"></div>
However, it doesn't show the image.
Your help will be much appreciated.
Not sure how you have structured your view files, but the reason why the first one is working is probably because it have an absolute path for the image ('http://placehold.it/1900x1080&text=Slide One')
Try using an absolute path to you image in the assets folder.
Instead of:
<div class="fill" style="background-image:url('../assets/images/image1.jpg')"></div>
Try:
<div class="fill" style="background-image:url('<?=base_url('assets/images/image1.jpg')?>')"></div>
I am about to use any lightbox, colorbox, or fancybox. However, when I read the documentation for all of them, it looks like the images are displayed as an overlay. What I like to do is display the image in a set div above the thumbnails. So, to explain more, here is a sample of html that I like to have
<div class="selected-image">
<!-- This div will be large in dimentions, and will display the selected thumbnail image -->
</div>
<div class="thumbnails">
<!-- This div will have a list of all the thumbnails available -->
</div>
Clicking on any image inside .thumbnails will result in changing the image in .selected-image
Is it possible to do so? If now, what is the alternative?
Thanks.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click