I go to http://blueimp.github.io/Bootstrap-Image-Gallery/ and click on the blue button that says Launch Image Gallery. I notice the images have titles.
I can get the images to work... but I can't display the titles or image captions.
See: http://communitychessclub.com/chessresearcher/ and click on gallery tab in bootstrap navbar menu at the top. Images, yes... titles or captions... no.
I used chrome inspect element but it makes no sense to me.
Sample of my markup:
<div id="links">
<a href="images/Evening%20Park,%20Kharkiv_2011.JPG" title="Evening Park, Kharkiv 2011" data-gallery> </a>
<!--<a href="images/Main%20Photo.jpg" title="test" data-gallery> </a>-->
<a href="images/Kharkiv_2011.jpg" title="Kharkiv, 2011" data-gallery> </a>
<a href="images/Kharkiv_2013-1.JPG" title="Kharkiv, 2013" data-gallery> </a>
<a href="images/Kharkiv_2013.JPG" title="Kharkiv, 2013" data-gallery> </a>
<a href="images/Lavaur,%20France_2011-1.JPG" title="Lavaur, France 2011" data-gallery> </a>
<a href="images/Lavaur,%20France_2011.JPG" title="Lavaur, France 2011" data-gallery> </a>
<a href="images/New%20Year,%20Kharkiv_2012-13.JPG" title="New Year, Kharkiv 2012-13" data-gallery> </a>
<a href="images/Switzerland,%20Zurich_2011.JPG" title="Zurich, Switzerland, 2011" data-gallery> </a>
<a href="images/Winter,%20Kharkiv_2011.JPG" title="Winter, Kharkiv 2011" data-gallery> </a>
</div>
Anyone have any ideas?
Kudos, on your website.
When i checked it with Firebug I saw that the title is not being rendered at last please check it with your jquery plugins.
Related
I am editing a WordPress widget's HTML.
I copied directly from the original code adding social media links and 1 additional social media section, copied from the first section, and changed only the names and links.
Whenever I checked it I get the following errors:
End of file seen and there were open elements
Unclosed element
See enclosed image.
HTML Errors
Here is the code ( WordPress widget HTML do not require; Doctype, title, header, etc ):
<div class="ce-team">
<figure>
<img src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png" alt="team">
</figure>
<h3>
Anthony Gigante
</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<i class="cl-icon-facebook"></i><i class="cl-icon-instagram"></i>
<i class="cl-icon-instagram"></i><i class="cl-icon-youtube"></i>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i></a>
</div>
I'm sure I'm missing something obvious. Your help is greatly appreciated.
Thank you!
Paula
The problem is that the first DIV is missing closing, Putting the closing DIV tag at the end of the code should fix the problem.
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
</div>
But closing the DIV is a bit confusing, as there are two possibilities to close the div tag. If the first option doesn't work well, try the following code. This closes the DIV before the second DIV
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
</div>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
I'm using Wordpress.com
I have multiple jump links destinations on 1 page but it all goes to the bottom of the correct page.
My target code looks like this:
<h3 style="text-align:justify;"><a name="grt"></a>Guarantor</h3>
<h3 style="text-align:justify;"><a name="sg"></a>Social Guarantor</h3>
<h3><a name="pwd"></a>Persons with disabilities</h3>
My link there looks like this:
<a href="http://melissalsh.com/#grt" target="_blank" rel="noopener">
<a href="http://melissalsh.com/#pwd" target="_blank" rel="noopener">
<a href="http://melissalsh.com/#sg" target="_blank" rel="noopener">
It all goes to the correct page but at the very bottom of the page. help please?
To link to a specific location on a web page, use an anchor tag and the id attribute instead of name
Like : <h1 id="destination">Heading Text</h1>
<h3 style="text-align:justify;"><a id="grt"></a>Guarantor</h3>
<h3 style="text-align:justify;"><a id="pwd"></a>Guarantor</h3>
<h3 style="text-align:justify;"><a id="sg"></a>Guarantor</h3>
<a href="http://melissalsh.com/#grt" target="_blank" rel="noopener">
<a href="http://melissalsh.com/#pwd" target="_blank" rel="noopener">
<a href="http://melissalsh.com/#sg" target="_blank" rel="noopener">
I tried adding the target="new" and target="_blank" in the code, but it's not working.
<b:loop values='data:links' var='link'>
<li expr:class='"social-item " + data:link.name'>
<a expr:href='**data:link:target**'>
<i class='item-icon fa'/>
<div class='remove-count'>
<data:link.name/>
</div>
<span class='item-text'>Followers</span>
</a>
</li>
</b:loop>
I'm not sure what's going on with your code but to make a link open in a new tab and nofollow you would do something like this.
<a href="" target="_blank" rel="nofollow" >Link Text</a>
On our magento category pages, I have added a static block at the top. This static block contains 3 images.
The 3 images appear on Chrome and Internet Explorer. But on Firefox, none of the images show.
On chrome and IE, the code displays the 3 images and it looks like this:
<p>
<a href="">
<img width="250px" height="135px" src="/img1.jpg" />
</a>
<a href="">
<img width="250px" height="135px" src="/img2.jpg" />
</a>
<a href="">
<img width="250px" height="135px" src="img3.jpg" />
</a>
</p>
But on firefox, it adds the class="qluzuqkroyuyuepwnuwm" on the img tags.
<p>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img1.jpg" />
</a>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img2.jpg" />
</a>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img3.jpg" />
</a>
</p>
I have no idea what that class is or why it gets added on there only on firefox.
Does anyone have any ideas on why a class gets added on firefox only, and why the images don't show?
Thank you.
God, I am an idiot.
Adblock was turned on and it blocked my images /facepalm
Really sorry everyone, I thank anyone who read this post or brief investigation.
I am using Skrollr and Skrollr Menu on a website for my senior capstone. I have these divs set up to fade in and fade out in the same location, similar to a slideshow. My problem is that when I click the the prev and next links it jumps back to the top of the page. When I click on them I want it to scroll "down" to the next slide. I have tried using data-menu-top but haven't had any luck using it.
<div class="slideContent" data-900="opacity:0;" data-1200="opacity:1;" data-1300="opacity:0;">
<a name="slide2"></a>
<h2>Step One</h2>
To begin, use your pencil to lightly write the word nice and big in the middle your paper. Make sure that it is written lightly because you are going to erase it later.
<br><br>
<a class="prev" href="#slide1" data-menu-top="#"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide3" data-menu-top="#"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-1300="opacity:0" data-1600="opacity:1;" data-1700="opacity:0;">
<a name="slide3"></a>
<h2>Step Two</h2>
Next, use your pencil to outline the letters.
<br><br>
<a class="prev" href="#slide2"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide4"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-1700="opacity:0;" data-2000="opacity:1;" data-2100="opacity:0;">
<a name="slide4"></a>
<h2>Step Three</h2>
Now you get to take your markers and trace the outline that you made with your pencil. Then, you take the eraser and erase the pencil lines so that all that is left is the marker outline.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-2100="opacity:0;" data-2400="opacity:1;" data-2500="opacity:0;">
<a name="slide5"></a>
<h2>Step Four</h2>
The next couple steps are what make your letters pop out like it's 3D! Lightly draw a dotted line across your paper, a few inches under your word. Then lightly draw an "X" at the very bottom of your page. This will be your vanishing point.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-2500="opacity:0;" data-2800="opacity:1;" data-2900="opacity:0;">
<a name="slide6"></a>
<h2>Step Five</h2>
Now, use your ruler and pencil to draw lines from all the corners on your letters to the Vanishing Point. Remember to draw these lines lightly because we will be tracing and erasing them.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-2900="opacity:0;" data-3200="opacity:1;" data-3300="opacity:0;">
<a name="slide7"></a>
<h2>Step Six</h2>
Now we are going to erase many of the lines we just drew but it is important to know which ones to get rid of. At this point erase, only erase the lines underneath the dotted line from Step Five and lines that go through your letters.
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>
<div class="slideContent" data-3300="opacity:0;" data-3600="opacity:1;" data-3700="opacity:0;">
<a name="slide8"></a>
<h2>Step Seven</h2>
Not all the lines you just drew should go all the way to the dotted line. Pay attention to the direction (horizontal/vertical) of the edge of the letters
<br><br>
<a class="prev" href="#slide3"><img src="assets/img/arrow_left.png"></a>
<a class="next" href="#slide5"><img src="assets/img/arrow_right.png"></a>
</div>