I downloaded this html5 template for a project https://html5up.net/overflow and I dont know how to put a link for github on the pictures displayed in the gallery (those 8 ) I want that when I click the pic and expand , the next click should sent me to a link and not to scroll over the next or previous picture.I tried to check the code but i found it to complicated for my actual level to figure it out . I am hoping that i can get some help here :) thank you
EDIT: I actualy need help in this part of code
<div class="inner gallery">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/thumbs/Pairs.png" alt="" title="A little game in"/></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Chrome.png" alt="" title="Dressed in Clarity" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/MP3.png" alt="" title="Raven" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Studenti.png" alt="" title="I'll have a cup of Disneyland, please" /></div>
</div>
</div>
When I click them twice I would like to send me to other links on other sites
if im understanding correctly what do you want do this
Change in your code..
Proceed as anticipated
for
Proceed as anticipated
dont forget to remove remove class="..."
Related
This is my first time publishing a question, so forgive me if there's something wrong with it.
I'm currently working on a three-slide custom carousel ad template, using amp-carousel from project AMP.
I've made my template available to you via this link: https://jsfiddle.net/mlealrinaldi/6hvx15gb/
Among the premises of the project, there are two that are mandatory:
1) The second carousel slide has to be partially visible on the right corner when the first slide is displayed (to arouse the user's curiosity when seeing the ad).
2) In the desktop version, when using the 'next' and 'prev' buttons, the carousel should scroll to the center of the next or previous image in the sequence.
The problem I found was that type="carousel" allows me to partially display the next slide, but when I click the 'next' button, it does not scroll to the center of the next slide. It scrolls past beyond the center instead.
And when I use the type="slides", the navigation buttons scroll correctly to the center of the next slide but does not allow me to display part of the next slide (only one slide at the time).
I'm looking for a solution that contemplates these two requirements. For reference, here's a link to amp-carousel documentation: https://www.ampproject.org/docs/reference/components/amp-carousel#type
This is the part of the HTML that contains the carousel:
<amp-carousel height="245" layout="fixed-height" type="carousel">
<div class="slide" id="slide1" style="margin-left: 20px">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>São 100 carros todos os dias</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
<div class="slide" id="slide2">
<img height="170" width="200" src="slide1.png"/>
<div>
<div class="cta" style="float:left"><p>Se ligar, é seu!</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
<div class="slide" id="slide3">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>Faça o teste drive.</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
</amp-carousel>
I've also tried to look into the .js AMP functions that listen to the click on the navigation buttons, and make the carousel work, but my limited knowledge only took me so far.
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
I found a lightbox online and copied it into my code.
the first image works perfectly, onclick to show, then click again to close.
but when you click on the second picture it shows the first one again, eventhough i replaced all the sources with another picture. what am i doing wrong? And be gentle, i'm new to all this
<img id="gallery1" src="gallery1.jpg"></img></p>
<div id="light" class="white_content1"></a> <img id="gallery1lb" src="gallery1.jpg"></img></div>
<div id="fade" class="black_overlay1">
</div>
<img id="gallery2" src="gallery2.jpg"></img>
<div id="light" class="white_content2"></a> <img id="gallery2lb" src="gallery2.jpg"></img></div>
<div id="fade" class="black_overlay2">
</div>
I have a really newbie question for you guys. I want to make a page which looks like the img below. And this is how I want it to work: I click one of the two buttons, then change the question/statement to a new one in the exact same place as the one before while the buttons stay the same (without messing up the structure). I tried a few methods from stackoverflow, but I couldn't get it working.
Thanks for your help!
My code looks like this. What I've got so far:
<div class="row" id="pic">
<div class="large-12 columns">
<div align="center">
<img src="justin2.png"/>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="question1"><h1 >This is a german shepherd.</h1></div>
<div class="question2"><h1 >This is rottweiler.</h1></div>
<div align="center" >
<a href="#" id="True" class="button success" >True</a>
<a href="#" id="False" class="button alert" >False</a></div>
You can wrap all you question between one division with relative position and change your question position to absolute.
Because you can have good vision of that, I wrote and implement it in jsfiddle.
You can check the code consist of js, html and css here
I’m searching for a way to display the next and previous slideshow image within the Twitter Bootstrap Carousel.
As per default it just show the current image and if I remove the display:none css property it has every item in the carousel below each other. I’ve tried to play with the CSS but haven’t got it to work.
The idea is to display the current slideshow image in the middle and then the next and previous image with opacity, not necessarily clickable.
I’ve tried different slideshows and carousels but can’t seem to find anyone which satisfies these requirements and some of those who come close will not adapt to the responsive design that Bootstrap provides.
Normally when I’m using the carousel with multiple items, I just group e.g. images within the <div class="item"> div like:
<div class="item active">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
<div class="item">
<img src="http://www.entiri.com/minett/img/slider/1.jpg" alt="">
<img src="http://www.entiri.com/minett/img/slider/2.jpg" alt="" style="">
<img src="http://www.entiri.com/minett/img/slider/3.jpg" alt="" style="">
</div>
But this will not do what I want because it rotates all three items at the time and not take one image each.
Any suggestion, advice, or link for some walk-through or tutorial will be very much appreciated.
Cheers
This is the link that helped me
Twitter Bootstrap 101: The Carousel