Good morning to everyone,
After a series of attempts and research I was able to find this example that definitively solves the possibility of creating a multimedia gallery (images, selfhosted or not videos, iframe and so on).
https://codepen.io/makshh/pen/ONMVMm
It's based on photoswipe then I should insert a description in the image. I read the documentation and inserted the tag correctly but it's previewed below the thumbnail and not in the slider.
Eg:
<div class="col-md-3">
<div class="photoswipe-item">
<a href="https://www.w3schools.com/css/img_fjords.jpg">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Image description" class="img-responsive">
</a>
<figcaption>dummy description</figcaption>
</div>
</div>
At this point I tried to encapsulate (as per documentation https://photoswipe.com/documentation/getting-started.html) the image in the tag but nothing to do.
Do you have any idea how to correctly insert the caption for each image / video?
Thank You in advance anyone who can help me
Regards
Ale
Related
3/8 images for my projects on my github portfolio arent showing up on github pages but do work when I open a local browser.
div class="cbp-item development">
<!-- data-title attribute will be use to populate lightbox caption -->
<img src="assets/img/streak.png" alt="custom alt 1" class="img-fluid"></a>
<div class="cbp-hover">
<h4><a class="cbp-lightbox" data-title="Portfolio One"
>Streaking</a></h4>
<p><a target="_blank" href="https://github.com/dodgen92/Streaking">React JS memory game</a></p>
</div>
</div>
This is a snippet of a broken image (the indentation is cleaner in the actual code), I'm quite baffled as they're all essentially a boiler plate of each other. Any help would be greatly appreciated
Make sure to capitalize the image's file extensions.
MORE DETAILS:
The file structure is as follows:
Here it is on my server:
ORIGINAL: So, I'm building out the "projects" section of a website, and for some reason the images that should show aren't showing. The paths are correct but some of the images just won't appear.
I've renamed the images, changed the paths, placed in different folders but to no avail. Any suggestions? Hovering over the code in the IDE shows the image path works.
The actual site being worked on is: http://mikestrawmedia.com/index.html
That said, hovering over the image path in dev tools when testing and even when pushing the update shows no image.
HTML
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class="Portfolio-box webdesign">
<img src="img/projects/bbsfl.PNG" alt="">
<h3>BBSFL -- Sim Football League</h3>
<p>Web Design</p>
</div>
<div class="Portfolio-box branding">
<img src="img/projects/mslogo.png" alt="">
<h3>Mike Straw Media</h3>
<p>Branding</p>
</div>
<div class="Portfolio-box branding">
<img src="img/projects/SGOOverlay.png" alt="">
<h3>Sports Gamers Online</h3>
<p>Branding</p>
</div>
Ultimately it was the image size. By optimizing the images for web, they loaded right up. Thank you to everyone who helped!
I mask my domain name as I use my university free web hosting because I'm a poor student.
I have a link in my portfolio site to a Youtube video but it will not let me click on the link... the only way to open it is to right click and open in new window/tab.
How can I avoid this..?
The site is www.Grice95.co.uk and the link is in he far left 'CAMERA USE' icon.
Thanks Luke
You could try a hax like setting the href like this:
<a class="" href="https://www.youtube.com/v/_djf6rZ_0i4">
<img alt="" src="../images/large/cam-txtdriving.png">
<p>Text Driving - The Unwanted Outcomes (Intermediate)</p>
</a>
Or:
<a class="" href="https://www.youtube.com/watch?v=_djf6rZ_0i4&output=embed">
<img alt="" src="../images/large/cam-txtdriving.png">
<p>Text Driving - The Unwanted Outcomes (Intermediate)</p>
</a>
Or:
<a class="" href="https://www.youtube.com/embed/_djf6rZ_0i4">
<img alt="" src="../images/large/cam-txtdriving.png">
<p>Text Driving - The Unwanted Outcomes (Intermediate)</p>
</a>
The way around this is to get the iframe embed code and take the URL from there.
Taking this will redirect your youtube link to a full screen embed of your video that works whilst still retaining the masked url.
Thanks to 'thepio'
So I have this new blog of mine, which contains a slider. ( you can take a look here : Pc and Internet tutorials blog
As you can see in the slider there is actually no image being shown, its simply a white area behind the title and description in black wrapper.
The thing is in the slider part of html code everything is setup correct i guess
Here is the code if it would offer some help :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>
<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>
<div class='imageElement'>
<h3>How to increase Facebook likes ?</h3>
<p>Getting likes on your status or picture on Facebook is probably an aim for every Facebook user. How not and everyone seeks that feeling of popularity through having many likes ?
In this tutorial I'll try to guide you step by step on how to increase the number of likes you get on Facebook.</p>
<a class='open' href='http://pc-internet-tutorials.blogspot.com.es/2014/08/how-to-get-facebook-likes.html' title='Get mroe Faceebook likes'/>
<img alt='get facebook likes on your picture' class='full' HEIGHT="50" WIDTH="50" src='http://1.bp.blogspot.com/-xTwClUYen3A/U_Hsap6QBdI/AAAAAAAAAMc/IGbxs0gIiz8/s1600/how-to-get-more-likes-facebook.jpg'/>
</div>
</div>
</div>
</div>
</div></b:if></b:if>
http://pastebin.com/h2mkuHQT ( its a link because in this website it would get changed abit )
As you see the picture's urL you can find in the pastebin link is working, still picture isn't being shown.
any tips on how to fix this issue?
thanks in advance
Allright, I have asked a friend, then problm was that in the CSS I had to add some code because currently the picture was there, just under the slider.
Adding this before the tag solved the issue :
<style>div.slideElement { top: 0px; }</style>
thank you either way:)
You have an unclosed <a> tag that should be causing the problem.
update to:
<div class="imageElement">
<h3>How to increase Facebook likes ?</h3>
<p>Getting likes on your status or picture on Facebook is probably an aim for every Facebook user. How not and everyone seeks that feeling of popularity through having many likes ?
In this tutorial I'll try to guide you step by step on how to increase the number of likes you get on Facebook.</p>
<a class="open" href="http://pc-internet-tutorials.blogspot.com.es/2014/08/how-to-get-facebook-likes.html" title="Get mroe Faceebook likes">
<img alt="get facebook likes on your picture" class="full" HEIGHT="50" WIDTH="50" src="http://1.bp.blogspot.com/-xTwClUYen3A/U_Hsap6QBdI/AAAAAAAAAMc/IGbxs0gIiz8/s1600/how-to-get-more-likes-facebook.jpg"/>
</a>
</div>
I believe this will help your problem.
You should not use self closed <a> tag if you want to use image (<img>) as anchor link.
I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>