With the following code, I am using a spotlight for each item of the page.
<a style="text-align:center; top:50%"data-lightbox="on" data-spotlight="on">
<img src="http://localhost/mysite/wp-content/uploads/2016/06/cropped-291H-1.jpg" alt="" width="180" height="120" />
<p>Watch Episode</p>
</a>
How can I actually put the paragraph on top of the image instead of letting it stay at the bottom?
Related
When the out transition finishes, the rest of the page goes up and then down again to make space for the next image. (Look at the gif I posted)
this is how I implemented the transition tag:
<div class="xs12 md6 lg6" >
<transition
v-if="heroImages[iterator] != undefined"
mode="out-in"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="iterator%2 == 1" style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl + heroImages[iterator].url"
alt=""
/>
</div>
<div v-else-if="iterator%2 == 0 && iterator != 4" style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl + heroImages[iterator].url"
alt=""
/>
</div>
<div v-else style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl + heroImages[iterator].url"
alt=""
/>
</div>
</transition>
</div>
Iterator changes with a js function every 2 seconds. This make the image changing.
How can I avoid this graphic "glitch" between images?
Try to use v-show instead of v-if v-show vs. v-if and set height on your image style.
I am trying to make a dropdown menu with the user image. however either the image is misplaced when I use (1st case), or it is in the right place using only but not rounded as I want (2nd case).
https://imgur.com/a/bJPprXH
I started using the image component as the bulma documentation says. I was going through some classes, I removed the external to . without I can't get the image to be round
1st case:
2nd case:
<div class="navbar-link">
<img src="image">
</div>
i wan this dropdown to be like the second case image but image with rounded shape
Maybe like this?
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<img
src="https://www.stickpng.com/assets/images/58e91a21eb97430e81906500.png"
style= "border-radius: 9001px;"
alt="Placeholder image"
>
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Jobs
</a>
</div>
</div>
https://codepen.io/bluebrown/pen/OJJggMM?editors=1000
i need hide pics and no use display:none
I use Highlight script for create one gallery , the problem it´s i need only show 4 pics and no the others , the script let click in one pic and show the others with arrows , the problem it´s if i use display:none for the other pics and no in the first 4 , the other pics no show finally
I try other possibilities , but no works , i need hide all pics out of the firsts 4 but i can´t use display:none
The Best Regards
You can easily change this Highslide example gallery: http://highslide.com/examples/gallery-thumbstrip-above.html to have four visible thumbnails in the page instead of one visible thumbnail. The clue is to move the markup for the thumbnails you want to be visible, outside the hidden-container div.
The example gallery has one thumbnail outside the hidden-container div (see the source code).
jsFiddle with four visible thumbnails: http://jsfiddle.net/roadrash/Un4N7/ The HTML markup of a gallery with eight images, but only four visible thumbnails, will look like this:
<div class="highslide-gallery">
<a href="large-image1.jpg" onclick="hs.expand(this)" />
<img src="thumbnail1.jpg" alt="" />
</a>
<a href="large-image2.jpg" onclick="hs.expand(this)" />
<img src="thumbnail2.jpg" alt="" />
</a>
<a href="large-image3.jpg" onclick="hs.expand(this)" />
<img src="thumbnail3.jpg" alt="" />
</a>
<a href="large-image4.jpg" onclick="hs.expand(this)" />
<img src="thumbnail4.jpg" alt="" />
</a>
<div class="hidden-container">
<a href="large-image5.jpg" onclick="hs.expand(this)" />
<img src="thumbnail5.jpg" alt="" />
</a>
<a href="large-image6.jpg" onclick="hs.expand(this)" />
<img src="thumbnail6.jpg" alt="" />
</a>
<a href="large-image7.jpg" onclick="hs.expand(this)" />
<img src="thumbnail7.jpg" alt="" />
</a>
<a href="large-image8.jpg" onclick="hs.expand(this)" />
<img src="thumbnail8.jpg" alt="" />
</a>
</div>
</div>
I am trying to implement add this code to a site , I would like to open facebook,twitter,linkedin and email windows as pop up when any one click on the buttons . I am also using cutomized buttons here . All other except linked in works perfect , but linked is not opening in a pop up window instead it opens a seperate tab window. How can I solve this ? Please see the code here
<html>
<head></head>
<body>
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/30 /addthis_widget.js#pubid=sunilkumarpkerala"></script>
<!-- AddThis Smart Layers END -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook"><img src="http://mysite.com/workshop/shareimages/facebook.png"
width="32" height="32" border="0" alt="Facebook" /></a>
<a class="addthis_button_twitter"><img src="http://mysite.com/workshop/shareimages/twitter.png"
width="32" height="32" border="0" alt="Facebook" /></a>
<a class="addthis_button_linkedin"><img src="http://mysite.com/workshop/shareimages/linkedin.png"
width="32" height="32" border="0" alt="Linkedin" /></a>
<a class="addthis_button_email"><img src="http://mysite.com/workshop/shareimages/email.png"
width="32" height="32" border="0" alt="Email" /></a>
</div>
</body>
</html>
You can see the live example here
You can check Addthis Sharing Endpoints that doesn't uses their script and make it work how you want.
I'm having trouble with placing divs next to each other rather than having them below. I'm new to using CSS and I'm not sure what I need to do exactly.
The webpage is www.panduzee.com/wordpress
The post "Richard Lu" is suppose to be next to "Ashley Lee."
The link to the code is: http://pastebin.com/J3CNMfaP
And the CSS is: http://pastebin.com/isn5NViA
Sorry, I tried getting the code to work within this post but it wasn't showing up correctly.
Any help would be appreciated! The CSS was from the wordpress theme, just letting you all know.
Thank you!
jsFiddle( http://jsfiddle.net/BnJ7g/3/ )
on your "boxes" and "boxes2" divs, add the float:left attribute.
<div id="boxes" style="float:left;">
<div class="box">
<!--The post title-->
Ashley Lee <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>
<div id="boxes2" style="float:left;">
<div class="box">
Richard Lu <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>