I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
Related
I am trying to build a car configurator app. The premise is as follows:
Images of the car are placed in an array. The user is first presented with a pre-set image of the car. The user has to click on their desired color and rim, triggering a change in [my defined JavaScript] flags for each case thus changing the original car image. A function that returns the specific image, depending on which flags are set via the respective setFlag functions, is called.
I tried numerous ways to retrieve the images, yet no matter what I do, only the original image stays displayed.
My JS code:
const imageArrayWhite=["./Aura_Config_Images/ASFlashBlueW.png","./Aura_Config_Images/ASEurosRedW.png"];
const imageArrayBlack=["./Aura_Config_Images/ASEurosRedB.png"];
document.addEventListener("load",imageChanger);
var WhiteFlag=false;
var BlackFlag=true;
var EurosRedFlag=true;
var FlashBlueFlag=false;
var carImageID=document.getElementById("carImage");
function setEurosRedFlag(){
EurosRedFlag=true;
FlashBlueFlag=false;
}
function setFlashBlueFlag(){
EurosRedFlag=false;
FlashBlueFlag=true;
}
function setWhiteFlag(){
WhiteFlag=true;
BlackFlag=false;
}
function setBlackFlag(){
WhiteFlag=false;
BlackFlag=true;
}
function imageChanger(){
// var runner=true;
// while(runner=true){
for(var imageW of imageArrayWhite){
if(WhiteFlag=="true" && EurosRedFlag=="true"){
imageW=imageArrayWhite[1];
carImageID.src=imageW;
}
if(WhiteFlag=="true" && FlashBlueFlag=="true"){
imageW=imageArrayWhite[0];
carImageID.src=imageW;
}
}
for(var imageB of imageArrayBlack){
if(BlackFlag=="true" && EurosRedFlag=="true"){
imageB=imageArrayBlack[0];
carImageID.src=imageB;
}
}
}
//}
My HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue Automotive - Aura Configurator</title>
<link rel="stylesheet" type="text/css" href="CSS\Vue.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<meta name = 'viewport' content='width=device-width, initial-scale=1'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- Upper Logo image -->
<img src="Images/VueLogW7.png" class="headimage">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<hr>
<!-- Upper navigation bar -->
<nav class="nav2">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.php">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">PRODUCTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT US</a>
</li>
</ul>
</nav>
<!--Dynamic Image div-->
<div class="exterior_image_div">
<img class="exterior_image" src="Aura_Config_Images\ASEurosRedB.png" id="carImage">
</div>
<!--Ecterior options div-->
<div class="exterior_options_div">
<!--Color div-->
<h2 style="font-family: Ubuntu"> Color </h2>
<div class="grid_container_colors">
<a class="color_link" href="#" onclick="setFlashBlueFlag(), imageChanger()">
<div class="grid_color_1">
<img src="Aura_Config_Images\CFlashBlue.png" class="grid_color_image" id="flashBlue" type="radio">
<p>Flash Blue</p>
</div>
</a>
<a class="color_link" href="#" onclick="setEurosRedFlag(), imageChanger()">
<div class="grid_color_2">
<img src="Aura_Config_Images\CEurosRed.png" href="#" class="grid_color_image" id="eurosRed" type="radio" checked>
<p>Euros Red</p>
</div>
</a>
</div>
<!--Rim div-->
<h2 style="font-family: Ubuntu"> Rim </h2>
<div class="grid_container_colors">
<a class="color_link" href="#" onclick="setWhiteFlag(), imageChanger()">
<div class="grid_color_1">
<img src="Aura_Config_Images\RimW1.png" class="grid_color_image" id="whiteRim" type="radio">
<p>18" Six-Spoke (Silver)</p>
</div>
</a>
<a class="color_link" href="#" onclick="setBlackFlag(), imageChanger()">
<div class="grid_color_2">
<img src="Aura_Config_Images\RimB1.png" href="#" class="grid_color_image" id="blackRim" type="radio" checked>
<p>18" Six-Spoke (Black)</p>
</div>
</div>
</div>
<script type="text/javascript" src="JavaScript/Aura_Config_JS_1.js"></script>
</body>
</html>
I tried accessing the array via different loop types and adding extra functionality to the functions, to no avail.
Image of my webpage:
Any help would greatly be appreciated. Sorry for replying late but I'll be off to bed for tonight.
Maybe you could try refactoring your code changing this
function setFlashBlueFlag(){
EurosRedFlag=false;
FlashBlueFlag=true;
}
to this:
function setFlashBlueFlag(){
EurosRedFlag=false;
FlashBlueFlag=true;
imageChanger();
}
(and the same to the other functions), and this:
onclick="setEurosRedFlag(), imageChanger()"
to this:
onclick="setEurosRedFlag()"
I have two column, in first column there is a list where I want to click and change slide in mobile frame, i.e. following is my html
<div class="convenience-wrapper">
<div class="convenience-content">
<h3>Convenience</h3>
<ul class="list-unstyled">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div class="mobile-wrapper">
<div class="mobile-frame">
<img src="images/mobile-frame.png" alt="Mobile Frame" />
</div>
<div class="mobile-screens">
<img src="images/order-on-app.png" alt="Order on App" />
<img src="images/flexible-quantity.png" alt="Flexible quantity" />
<img src="images/buy-now-pay-later.png" alt="Buy now pay later" />
<img src="images/scan-qr.png" alt="Scan QR" />
</div>
</div>
</div>
I want to click on left side list i.e. one, two, three and want to change slide/image in "mobile-screens" div.
I have searched a lot but everyone is repositioning and changing slick dots style, I want dots functionality at my own custom design list, anyone can guide me how to to that.
Here is my take on it:
jQuery(document).ready(($) => {
$("#mySlider").slick({
infinite: true
})
$("#myNavList > li").click((e) => {
let element_index = [...e.target.parentElement.children].indexOf(e.target)
$("#mySlider").slick("slickGoTo", element_index)
})
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div>
<ul id="myNavList">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="mySlider" style="max-width: 100%">
<img src="https://picsum.photos/200?1"/>
<img src="https://picsum.photos/200?2"/>
<img src="https://picsum.photos/200?3"/>
</div>
</div>
I would personally not use the element_index method in production but this is just a quick demo code to explain what tools you can use to achieve what you asked for.
I have a page that has a nav bar and aside as in below url: https://imgur.com/Nc2QuRv
When I click on the first item in the nav bar which is an image, I want the aside to fadeout or if it is already fade out, I want it to fade in. I am just trying fade out for now using jquery but the event does not seem to do anything.
I tried using class, id, child, find functions in jquery. none of it seem to help
Here is my code:
html
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/action-bar.js"></script>
</head>
<html>
<body>
<header class=header>
</header>
<nav class=navigation-bar>
<img id="menu-img" class="nav-action-image" src="menu_icon.png"/>
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<aside class="action-block">
<div class="action-block-element-main">Some text</div>
</aside>
</body>
</html>
jquery
$(function(){
$(".navigation-bar").find("#menu-img").click(function() {
$(".action-block").fadeOut(3000));
});
});
When I click on the first item in the nav bar which is an image, I want the aside bar below it to fade out. what am i doing wrong here?
You can just use the fadeToggle method to toggel back and forth. It's not necessary to use find - just target the image. Your img had an empty href which was causing the click to leave the page.
$(document).ready(function() {
$("#menu-img").click(function() {
$(".action-block").fadeToggle(3000);
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<nav class="navigation-bar">
<img id="menu-img" class="nav-action-image" src="https://picsum.photos/50" />
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<aside class="action-block">
<div class="action-block-element-main">Some text</div>
</aside>
(function() {
$('#menu-img').on('click', function() {
$(".action-block").fadeOut(3000);
});
})($);
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<nav class="navigation-bar">
<img class="nav-action-image" id="menu-img" src="menu_icon.png">
<a class="active" href="#Summary">Summary</a>
Preferences
</nav>
<aside class="action-block">
<div class="action-block-element-main">
Some text
</div>
</aside>
I use ZURB Foundation 5's tabs. When I click on a tab the hash in the URL is changed.
I would like to prevent this behaviour because I use hash to handle the page load.
I was trying to use preventDefault but nothing happened.
Does anybody know how to achieve this?
Second try it's really work. But not work on loaded content from Ajax
this is my index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cẩm nang Dịch Lý beta 2.0.0</title>
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body >
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<!-- <a class="left-off-canvas-toggle menu-icon" href="#">
<span></span>
</a> -->
<a class="left-off-canvas-toggle icon-menu" href="#">
<span></span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ">titke</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a href="#home" >xxxx</a></li>
<li><label></label></li>
<li>xxxx</li>
</ul>
</aside>
<section class="main-section" >
<!-- content goes here -->
<div id="main"></div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is my app.js
page_manager();
$(window).on('hashchange', function(event) {
page = $(this).attr('href');
page_manager(page);
});
$(document).foundation({
offcanvas : {
open_method: 'move',
close_on_click : true
}
});
function page_manager(page){
var hash = window.location.hash;
if(!page){
var page = hash.split('/')[0];
}
var input = hash.split('/')[1];
off_canvas();
switch(page) {
case'':
case'undefined':
case'#home':
$( "#main" ).load( "pages/home.html", function() {
page_home();
});
break;
case '#solar':
$( "#main" ).load( "pages/solar.html", function() {
page_solar(input);
});
break;
}
And this is my solar.html
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Chủ</li>
<li class="tab-title" role="presentational" >Hỗ</li>
<li class="tab-title" role="presentational">Biến</li>
</ul>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
</div>
From the Docs
Deep Linking
Set deep-linking to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign.
So if you mean you want to disable the hash change you may want to try to set it to false and remove the data-slug for the tabs..
<div data-section data-options="deep_linking: false">
I haven't used foundation before but this may help..
Edit
Include properly your Foundation dependencies
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
Now try this, leave your tab sections empty and add an event to load content via AJAX, then call
HTML
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational">
Chủ
</li>
<li class="tab-title" role="presentational">
Hỗ
</li>
<li class="tab-title" role="presentational">
Biến
</li>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1" data-options="deep_linking: false">
<h2>Here perhaps add something because it is the active tab</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2" data-options="deep_linking: false">
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3" data-options="deep_linking: false">
</section>
</div>
JavaScript
$(document).ready(function () {
$(document).foundation(); // Init Foundation
// When first Tab is clicked get AJAX content
$("a[href='#panel2-1']").bind("click", function (e) {
e.preventDefault();
$("#panel2-1").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow'); // or $(document).foundation('tab', 'reflow');
});
});
// Second anchor
$("a[href='#panel2-2']").bind("click", function (e) {
e.preventDefault();
$("#panel2-2").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
// and so on
$("a[href='#panel2-3']").bind("click", function (e) {
e.preventDefault();
$("#panel2-3").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
});
See the DOCS for more information about $(document).foundation('reflow'); it is useful to call this function after your AJAX is completed and successful.
If your first tab is active by default you may want to load the content via AJAX on DOM ready or add the content manually for this tab. I tried this on my end and works fine.
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example