I am working with some existing code and there is a preloader which loads some images for the navigation rollover state. It looks like this:
<body onload="MM_preloadImages('Images/Home-over.png','Images/Signup-over.png','Images/Costs-over.png','Images/Team-over.png','Images/Process-over.png','Images/Scholarships-over.png','Images/Login-over.png','Images/FAQ-over.png','Images/Contact-over.png','Images/About-over.png')">
An example of one of the nav items using the above is below:
<div id="Layer-15" class="Contact" > <img src="Images/Contact.png" alt="Contact" name="Contact" width="98" height="56" border="0" class="pngimg" id="Contact" onmouseover="MM_swapImage('Contact','','Images/Contact-over.png',1)" onmouseout="MM_swapImgRestore()" /></div>
Now all of the above is in the root folder.
When I go one folder deep, the nav breaks:
My code looks exactly the same as that posted above except that I prefix each reference to an image with '../', e.g. '../Images/Home-over.png' to send it back to the root folder first.
Unfortunately this does not work.
As nothing else is broken it seems to me that the images are not getting pre-loaded and this will most likely be because the image path is wrong.
However I'm not sure how it can be or how I go about figuring out the correct path?
All help is appreciated.
Thanks
The problem behind this was that the entire page code was getting duplicated due to a duplicate 'includes' statement in my php and this then prevented the styling of the nav bar.
Related
A straight forward image element does not seem to work in Ionic React.
I added an image in assets/images folder and gave the relative path in src of image element.
<img src="../../assets/images/image-1.jpeg" alt=""/>
I created a working example using CodeSandbox. Can somebody help me if I was doing anything wrong here?
Figured out the issue here. I had to put the images in assets folder which will be in public folder.
I moved my local image to public/assets/images/image-1.jpeg and then access that path in img element.
<img src="assets/images/image-1.jpeg" alt=""/>
I have been trying to debug this issue for my online portfolio. Thought I'd turn to you the Stackoverflow community for some assistance and might learn something along the way from the communities finest.
I'm probably missing something obvious. I have been trying to debug an issue where the navigation is not appearing as it should be.
Then the page is being loaded, for a split second, you can see the desktop navigation.
Loading Screenshot below:
After the page has completed loading, the navigation is not displaying.
Final load screenshot:
What am I missing here?
I found the answer to my own question. I was missing a space between two classes.
Backend code:
<div class="tm-navbar<?php echo $navbar; ?>"
This should of been like this:
<div class="tm-navbar <?php echo $navbar; ?>"
I do apprecaite all you help. Thanks guys.
it seems like theres some jQuery or javascript causing the menu to initially be hidden then to show when you scroll down to a specific point in the page.
it looks like that js or jquery is adding a classes to the div "tm-navbartm-navbar-overlay" called
"tm-navbar-transparent" which controls the menu being hidden, and also the class "uk-animation-slide-top" which controls the menu to show on scroll
first try doing a search for these classes in your project folder and if you see somewhere in a js file where it is controlling the nav, get rid of it.
if that doesnt work revert what you did and try overriding it with simple line of jQuery placed at the top of your main js file
$(".tm-navbartm-navbar-overlay").show();
I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.
I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.
However this is not working. I have copied the link to the image for example:
https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg
Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />
All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />
If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?
Well no sooner had I posted this question, the answer came up!
On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.
It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:
https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg
Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!
I have a div tag.
<div class="imsSummaryItem" id="imagesPreview">
</div>
<asp:Image ImageUrl="C:\Users\John\Desktop\TempFolder\16.jpg" runat="server" /> --not showing up as well.
In my javascript:
<script type="text/javascript">
function loadImages() {
$('#imagesPreview').append('<img src="C:\\Users\\John\\Desktop\\TempFolder\\16.jpg" />');
}
</script>
I am ending up with a hollow image. I dont see it. Just like an icon but its empty.I hope you understand what I mean. When I check the image properties it says 16.jpg and remaining all values are Not Available. What is wrong here?
I think image you are trying to show is not in web application folder / virtual directory.
Move image to your web application folder and then specify the relative or an absolute URL in ImageUrl property.
If you dont want to move images to your web folder then your only choice is to write HttpHandler which will read images from specified folder and transmit it to the client. This will also require some specific permissions for your web app IIS user to access some folder outside the web app scope.
I think escape sequence is not correct that is why it not able to reach that path.
try this: double backslash before forward slash ... SO is not allowing me to write it properly, it is omitting one back slash. i hope you got my point
"C:\\\/Users\\\/John\\\/Desktop\\\/TempFolder\\\/16.jpg"
Always try to have the images you need inside your solution.
Just copy the image from temp folder and have it inside the resources
Like have the image in Resources/Images folder so that you can refer it as
$('#imagesPreview').append('<img src="../Resources/Images/16.jpg" alt="text" />
I am using http://www.dhtmlgoodies.com/?whichScript=inline_slideshow jquery script
I want to give different different link in every images.
Looks like
<div class="imageSlideshowHolder" id="slideshow1">
<a href="http://www.learnphp.in">
<img src="../img.mysite.md/events/danceni/s01danceni.jpg" >
</a>
<a href="http://www.google.com">
<img src="../img.mysite.md/events/danceni/s02danceni.jpg" >
</a>
</div>
Above code the two images is sliding but last link http://www.google.com is working but http://www.learnphp.in not working.
How to change link with images?
This is because they are putting two images one over another:
<div class="imageSlideshowHolder" id="imageSlideshowHolder">
<img src="http://www.dhtmlgoodies.com/scripts/image-slideshow-4/images/image1.jpg" onclick="window.open('http://www.google.com')">
<img src="http://www.dhtmlgoodies.com/scripts/image-slideshow-4/images/image3.jpg" onclick="window.open('http://www.learnphp.in')">
</div>
But since the second image is always above first, here it will always open second link.
Either use some different library or change the library for your needs.
A mere google search result gave me following results:
http://wowslider.com/
http://bxslider.com/examples
http://www.slidesjs.com/
The slideshow works fine, the problem you have is that this javascript is not setup to provide an individual link to each image in the slideshow. As-is it won't work. I'm gonna see if I can crack ope the JS and modify it. If you rollover the image as it changes you will see that the url in your status bar never changes. Only one anchor tag is working and the content is getting switched out inside that element. You will need to assign a link via JS to each image as it changes.
(I see I was a few mins late on the answer) As the user below said, there are other image slideshow libraries that can do this for you with no modification.
This slideshow code is not optimized, you should look for another javascript slideshow that has the features you want. I found this one here on Stack O and there have been a few questions that debug and actually get the links working, here are the link:
jQuery Slideshow
Add Links
And another:
Link individual images