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>
Related
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="..."
I have several images in a grid. I want each image to overlay to fullscreen when I click on them.
I have this javascript on there, but when I click on the image the one that overlays is the last image on the grip. How should I fix that?
I'm using this, but I have several images:
http://jsfiddle.net/a8c9P/
The only the difference on mine from this is that it is in another div for another javascript that puts it into the grid.
HTLM:
<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">
</div>
check out this
are you trying for this? http://jsfiddle.net/Lqsmr4bu/
I just edited slider of content using coda slider.
So I have a photo gallery and when I click on any photo it open a page with coda slider. Which image is clicked, that image is the first slider. Clicking on the next, the slider switch to the next photo, but clicking on the previous photo, the slider go back to the beginning and not to the previous photo.
In the gallery, it looks like this:
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#2"><img src="../photos/2.jpg" width="150" height="100" />
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">2<br /><br /></h6>
</div>
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#1"><img src="../photos/1.jpg" width="150" height="100"/>
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">1<br /><br /></h6>
</div>
So, bw_slider.html is the page that contain the coda slider.
Continuation of the link #1 and in the other case #2 is a direct link to specific slide that contain that id.
In the coda slider it look like this with much more slides:
<div id="1">
<h2>1</h2>
<img src="1.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
<div id="2">
<h2>2</h2>
<img src="2.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
The js of coda slider is on the link above.
Does anyone have any idea how to avoid a return to the beginning when starting slider from the middle of the slider content.
I am just working on the Image Slider with a timer. But there are some issues...
Images are out of Sync with its text
I need a click event for the thumbnail timer, on click of that the image should change with a clear intervals.
Here is the Link which I am trying:
http://jsfiddle.net/alex_ball/UgQJG/
I noticed that the sync. problem is solved after a complete loop of showing images, so it is related with the download speed of the images. Suppose you use, 1.jpg, 2.jpg, 3.jpg and 4.jpg in your slide show. so you will include them first in displayed none div before the the div panel you used.
<div style="display:none">
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
<img src='4.jpg' />
</div>
<div id="panel">
<div id="title">
</div>
<img id="imageSlide" alt="" src="" width="250px"/>
<div id="desc">
</div>
</div>
<script>
//JavaScript slide initiation code here.
</script>
This will allow the page to download the images before render the slide show, so images will be ready to be maintained at the same speed with text.
I am using the toggle() with jQuery and I have a sidebar on my page and each header is
<h2 class="sidebar-header">
One section of my code will look like:
<div class="sidebar-section">
<h2 class="sidebar-header">SUBSCRIBE</h2>
<p class="sidebar">Make sure you subscribe to stay in touch with the latest articles and tutorials. Click on one of the images below:</p>
<div class="rss-icons">
<img src="http://gmodules.com/ig/images/plus_google.gif" width="62" height="17" alt="Add to Google Reader or Homepage" class="feed-image"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo3.gif" alt="Add feed to My Yahoo" width="62" height="17" class="feed-image" />
<img src="http://www.newsgator.com/images/ngsub1.gif" alt="Subscribe in NewsGator Online" class="feed-image" height="17" />
</div>
<hr />
<p class="sidebar feed">Don't have those? Grab the RSS url.</p>
<p class="sidebar delicious">Make sure you add me to delicious! </p>
</div>
They are each wrapped in those DIV elements. I am trying to make it for if you click the header, it will shrink up the content. I know toggle can do that, but if I make it for each "sidebar-header", you will click any one element on the page and it will hide them all, how can I do this?
Try something like this:
Suppose you have the following code:
<div class="topdiv">
<h2 class="header">Header 1</h2>
<div class="somecontent">
This is the content
</div>
</div>
<div class="topdiv">
<h2 class="header">Header 2</h2>
<div class="somecontent">
This is the content
</div>
</div>
Now, say that when you want to click on a header, the content of that header is displayed / hidden:
$(".header").click(function () {
$(this).parent(".topdiv:first").find(".somecontent").toggle();
});
This way, only the content of the particular header will be toggled, and not the rest.
Now you can analyze the code I have written for you, and apply it in your own context.
Try this:
nextAll
$(".sidebar-header").click(function() {
$(this).nextAll().toggle();
});