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>
Related
i am working on project using ASP.net Api and angular and i want to build carousal using ng2 bootstrap but i dont know how many images i will? any suggestion how this can be done.
You can check demo with source code http://valor-software.com/ng2-bootstrap/#/carousel
Pay attention how "add slide" button works, this is what you need to replicate
If you have an array of image urls, you can use the angular *ngFor syntax to loop through the images, causing the output to change depending on the array.
TypeScript: let images = ['image1.jpg', 'image2.jpg'];
HTML:
<div class="carousel-wrapper">
<div *ngFor="let image of images">
<image [src]="image" />
</div>
</div>
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
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 want the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</div>
Here's an example of my markup:
<li class="tumblr_post tumblr_photo_post">
<img class="tumblr_photo" alt="Testing photo post" src="http://29.media.tumblr.com/tumblr_li5e4zfgrd1qi4tmio1_400.png">
<div class="tumblr_caption">
<p>Testing photo post</p>
</div>
</li>
I'd like to change the size of the image's container without changing the image's size. As it's directly in the flow as an img, how can I do this?
I think your image is not contained into a div container like you are doing with the video on top.
Try to use the following jQuery code to add the img into a div container. You will have to add the jQuery library to your page of course.
$('.tumblr_photo').wrap('<div class="somename" />');