I need a little help with this template I have been using.
http://preview.themeforest.net/item/anchor-freelancer-creative-agency-portfolio/full_screen_preview/22433983
Its using Fancybox for the project section, which I am trying to change from displaying photos to playing videos on mouse hover.
can anyone help me out with changing the code from displaying photos to playing a video? thanks
this is the code for the one project
<div class="grid-item">
<figure class="reveal-effect se2-white wow perspective-box"><img src="images/works12.jpg" alt="Image">
<figcaption> <a data-fancybox="gallery" href="images/works12.jpg">
<div class="bg-color" data-background="#d4beb1"></div>
<!-- end bg-color -->
<div class="brand"> <img src="images/logo-brand.png" alt="Image"> </div>
<!-- end brand -->
<h5>Digital Creative Works</h5>
<small>WEB, UI-UX, CODING</small> </a> </figcaption>
</figure>
</div>
Related
After a lot of research, I have no found a solution to this problem.
I have migrated my html site to a Wordpress theme, but after doing that I found a problem with carousel. On my html code it works perfectly, but on Wordpress it adds empty items to the carousel.
Please any solution to this problem?
I found a related question, but no ones responded it:
Wordpress owl carousel add empty item
Please!!
Here's a referencial image
My code where I call the carousel
<div class="gallery full-width side-arrow">
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba00.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba2.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba3.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba4.png" alt="">
</div>
</div>
I want to resize images on this page.
They have exactly the same properties and code but the first one is has width: auto.
This is the code of the first image (baby boy):
<div class="wp-block-image">
<figure class="aligncenter is-resized">
<img src="https://milkandmotherhood.com/wp-content/uploads/418900_10152030658650634_1604957331_n.jpg" alt="baby boy sleeping" class="wp-image-821" width="512" height="540"/>
</figure>
</div>
Here's the code of the second image (family):
<div class="wp-block-image">
<figure class="aligncenter is-resized">
<img src="https://milkandmotherhood.com/wp-content/uploads/414572_10101518238988742_677706630_o.jpg" alt="Family on the meadow smiling" class="wp-image-822" width="512" height="341"/>
</figure>
</div>
Both are the same, yet the first image has width:auto at the webpage.
What should I change?
I created a carousel slideshow images using drupal bootstrap. Slideshow is working just fine. I added 3 images. Each image is about 1000x750. I would like to style these images so they look better in responsive devices. I like to see part of the images in slideshow even though original sizes are 1000x750. Below is the best I could explain as for what I am trying to do as I am bit confused.
When i visit the slideshow, images look big. When I make the screen responsive, images do not look right. I have not applied any css yet. I would like to apply css to the images so they look professional as I am making the screens responsive. I might be confusing you. So I shared a link.
If you visit this link, you will notice that original images are bigger than actual slide images. Also, slideshow images show only portion of the original images. Thats exactly what I would like to do.
sample link
My code.
<div class="view view-views-slideshow-home-page">
<div class="view-content">
<div id="views-bootstrap-carousel-1" class="views-bootstrap-carousel-plugin-style carousel slide">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#views-bootstrap-carousel-1" data-slide-to="0" class=""></li>
<li data-target="#views-bootstrap-carousel-1" data-slide-to="1" class="active"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<img typeof="foaf:Image" class="img-responsive" src = "/sites/default/files/insu.jpg" width="1000" height="667" alt="">
</div>
<div class="item active">
<img typeof="foaf:Image" class="img-responsive" src="/sites/default/files/ins.jpg" width="1000" height="667" alt="">
</div>
</div>
<!-- Carousel navigation -->
<a class="carousel-control left" href="#views-bootstrap-carousel-1" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#views-bootstrap-carousel-1" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
How can I apply css to the images and the wrapper so images look responsive and professional?
my image does not display as the true size, I've also tried to embed height and width but that does not work either. any idea of the proper code to get my .png to display as the original size?
my code is ----->
<div class="divPanel notop nobottom">
<div class="row-fluid">
<div class="span12">
<div id="divLogo" class="center">
<a href="index-alt.html" id="divSiteTitle">
<img src="images/logo.png" alt="Tech Mule" class="img-circle" title="Tech Mule"/>
</a>
</div>
</div>
</div>
</div>
I'm trying to get the last two navigation buttons ("Education" and "Contact") to move the social media icons to the left, and then stay there.
http://comms101.co.za/populus/index.php#
For some reason immediately when clicked, it momentarily displays correctly BUT then the social media icons revert back. If you click the button again, then it displays correctly (how it should display).
The navigation is a php include. Here is the code:
<div class="row">
<div class="col-lg-5 col-md-5">
<div class="logo"><img src="imgs/logo.png" alt="logo"></div>
</div>
<div class="col-lg-7 col-md-7 mn">
<div class="follow current1" style=""> <img src="imgs/f.png" alt=""> <img src="imgs/int.png" alt=""> <img src="imgs/in.png" alt=""> </div>
<div id="menu-icon">
<div class="menu-icn"><span></span><span></span><span></span></div>
</div>
<div class="menu" id="menu">
<ul id="links">
<li class="link">HOME</li>
<li class="link">ABOUT</li>
<li class="link">RESOURCES</li>
<li class="link">TRAINING</li>
<li class="link">COACHING</li>
<li class="folow current1 current">EDUCATION</li>
<li class="folow1 current2 link">CONTACT</li>
</ul>
</div>
</div>
you are adding an extra class to move social icons to left that one link2
"follow current1 link2".
so when you click then jquery add this class but on same time page refresh then "link2" class gone.
so what you need is to set the condition through php,
if the page is contact us then add class "link2" into this div.
<div class="follow current1 link2">
<img src="imgs/f.png" alt="">
<img src="imgs/int.png" alt="">
<img src="imgs/in.png" alt="">
</div>
The .link1 class has to be here when you load education page for example.
A way to do this is to test the active current page and to add class with a PHP condition in the menu.
It displays momently good because of surely a JS script you made on click of the link and then it loads the page.