I am trying to use the orbit feature in foundation 5. The loader seems to work but images don't load. I've inspected it and the link to images seems to be fine and i seem to have all the up to date JavaScript files needed for it to work.
Any ideas?
http://jsfiddle.net/p7PXS/
<div class="row">
<div class="slideshow-wrapper preloader">
<ul data-orbit data-options="animation:fade;
pause_on_hover:false;
animation_speed:1000;
navigation_arrows:true;
bullets:true;">
<li>
<img src="img/bodymetrix.jpg">
</li>
<li>
<img src="img/highgate.jpg">
</li>
</ul>
</div>
</div>
You seem to be missing those files from your working directory.
When you add a web link it works fine.
Related
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
OK downloaded, a free one page html5 template that uses Twitter Bootstrap - works fine, until I want to change a link in the top menu to go to another page. It doesn't work !
A little research suggests a z index issue - but I can't figure it out.
The menu is thus
<nav class="pull-left">
<ul class="list-unstyled">
<li class="animated wow fadeInLeft" data-wow-delay="0s">About Us</li>
<li class="animated wow fadeInLeft" data-wow-delay=".1s">Join</li>
<li class="animated wow fadeInLeft" data-wow-delay=".2s">Members</li>
</ul>
</nav>
And the site URL is http://merseytribe.co.uk/
Tried all sorts of things and it's driving me crazy !
Thanks, David
Try adding targe="_self" or target="_blank" to the anchor tag as per your requirement.
<a title="Sign up today for one free month trial at our gold club" href="http://merseytribe.co.uk/membership-register.html" target="_self">Join</a>
Join
Try this. it will work. because it is one page theme so all link is working with js. but it is absolute link.
I'm fairly new to expression engine so forgive me if this question comes across pretty obvious I have a slight problem with integrating exp:resso store tag in my temple, for some reason all
the code i apply under exp:resso's {store} tag doesn't appear on my broswer. The code below demonstrates how i have structured my EE tags, please correct me if i'm wrong...
{exp:channel:entries channel="products" limit="6" paginate="bottom"}
{exp:store:product entry_id="1" return="cart"}
<ul class="inventory">
<li class="item2"> {p_productimage}<img class="itemImg" alt="" src="{p_productimage_image}"/>{/p_productimage}
<div class="product-fam1">
<h3>{p_title}</h3>
<a class="viewItem" href="#"><img src="iamnatesmithen.com/fluotics/css/images/viewItem.jpg";</a>
</div>
</li>
</ul>
{/exp:store:product}
{/exp:channel:entries}
ExpressionEngine test site: http://www.iamnatesmithen.com/ExpressionEngine2/index.php/inventory
Current static site: http://iamnatesmithen.com/fluotics/products.html
Looks like you're not passing the product's entry id to {exp:store:product} correctly. Have you tried this? Note {exp:store:product entry_id="{entry_id}"...
{exp:channel:entries channel="products" limit="6" paginate="bottom"}
{exp:store:product entry_id="{entry_id}" return="cart"}
<!-- snip -->
{/exp:store:product}
{/exp:channel:entries}
I am creating a simple(ish) website for one of my iPhone apps using the Twitter Bootstrap project. I have created a full website with this and found it quite easy to use but I am having some issues media-grid.
I am trying to achieve a row of 3 images using the media-grid class. The images are 280px in width which gives me 840px in total. The container is 940px wide so I have 100px grace to use for padding etc. I am finding this extremely difficult to do as when i view the site it puts two images side by side then the third on the next row. Some anomalies are showing up though, which are;
When I publish the index.html and associated css file via FTP the website displays the images with two side by side then the third image on the next row underneath the first.
When I preview the website in 'Coda' (the editor on Mac I am using to write the html and css) the website looks exactly how I want it too with all 3 images side by side in one row.
I have tried a number of things;
I have tried editing the .media-grid styles in the CSS and it doesn't seem to make a difference to how the site looks. Even if I had massive margins or padding it doesn't alter for some reason?
I have tried putting my own id onto the media-grid class for the three images then styling then myself which also has no impact on the visuals.
I have used the following code to insert my images;
<div class="container">
<ul class="media-grid" id="imagearray">
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>
</div>
Am I missing something in the CSS? I am not fluent with CSS so it is possible I am overlooking something? Any help would be appreciated.
To get the default styling to work correctly you need to wrap the <li>s with an <a href>.
e.g.
<ul class="media-grid" id="imagearray">
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
<li>
<img class="thumbnail" src="img/tweettimemainimage.png" alt="">
</li>
</ul>