I am trying to use Highslide (http://highslide.com/) on my DotNetNuke site.
The problem is the thumbnails simply link to the images, rather than opening in Highslide.
It is as if the javascript is being ignored.
I have the thumbnail images appearing in the screen shots section - example here:
http://leansoftware.net/en-us/help/exceldatabasetasks/introduction.aspx
I have included the javascript references in the heading of the module:
<script type="text/javascript" src="http://leansoftware.net/highslide/easing_equations.js"></script>
<script type="text/javascript" src="http://leansoftware.net/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="http://leansoftware.net/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://leansoftware.net/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://leansoftware.net/highslide/highslide-ie6.css" />
<![endif]-->
And then in the DNN module content :
<div class="highslide-gallery">
<ul>
<li>
<a href="http://leansoftware.net/highslide/images/large/Edit_Titles.jpg" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Edit_Titles.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/DataSourceTab.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/DataSourceTab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/Help/ExcelDatabaseTasks/Introduction/tabid/151/ctl/Edit/mid/682/language/en-US/highslide/images/large/Excel-More-Options.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-More-Options.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Workstation-Tab.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Workstation-Tab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/DestTemplateTab.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/DestTemplateTab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Auto-Filter.jpg" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Auto-Filter.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Edit-Relational-Data-In-Excel.jpg" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Edit-Relational-Data-In-Excel.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/Help/highslide/images/large/DataLoad.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/DataLoad.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Batch-Tab.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Batch-Tab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/WorksheetTab.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/WorksheetTab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/Help/ExcelDatabaseTasks/highslide/images/large/Task-Parameters-In-Action.jpg" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Task-Parameters-In-Action.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Task-Parameters.JPG" class="highslide">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Task-Parameters.JPG" />
</a>
</li>
</ul>
<div style="clear: both;"></div>
</div>
Please can anyone suggest a fix?
EDIT (by Author) : 08:19 GMT
Thank you for the responses.
The code now reads:
DNN Module header:
script type="text/javascript" src="http://leansoftware.net/highslide/easing_equations.js"></script>
<script type="text/javascript" src="http://leansoftware.net/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="http://leansoftware.net/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://leansoftware.net/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://leansoftware.net/highslide/highslide-ie6.css" />
<![endif]-->
HTML Module:
<div class="highslide-gallery">
<ul>
<li>
<a href="http://leansoftware.net/highslide/images/large/Edit_Titles.jpg" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Edit_Titles.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/DataSourceTab.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/DataSourceTab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-More-Options.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-More-Options.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Workstation-Tab.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Workstation-Tab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/DestTemplateTab.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/DestTemplateTab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Auto-Filter.jpg" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Auto-Filter.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Edit-Relational-Data-In-Excel.jpg" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Edit-Relational-Data-In-Excel.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/Help/highslide/images/large/DataLoad.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/DataLoad.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Batch-Tab.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Batch-Tab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/WorksheetTab.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/WorksheetTab.JPG" />
</a>
</li>
<li>
<a href="http://leansoftware.net/Help/ExcelDatabaseTasks/highslide/images/large/Task-Parameters-In-Action.jpg" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Task-Parameters-In-Action.jpg" />
</a>
</li>
<li>
<a href="http://leansoftware.net/highslide/images/large/Excel-Task-Parameters.JPG" class="highslide" onclick="return hs.expand(this, config1)">
<img alt="" src="http://leansoftware.net/highslide/images/thumbs/Excel-Task-Parameters.JPG" />
</a>
</li>
</ul>
<div style="clear: both;"></div>
</div>
Your "a href's" simply aren't invoking the Highslide JS script. It's not enough simply to label them with "class='highslide'". You need to add an onclick attribute.
Let's take your first link:
<a href="/highslide/images/large/Edit_Titles.jpg" class="highslide">
This needs to be:
<a href="/highslide/images/large/Edit_Titles.jpg" class="highslide" onclick="return hs.expand(this)">
The link to your highslide.config.js file is also a problem. It's pointing to something that appears not to exist.
Related
I have a code where this would essentially show links that you can press and would redirect you. I am have a problem where I am trying to click the link to "eco-news" and essentially open up a page with news articles in it. I have coded the news section, but I just dont know how to implement it.
Home > News > (directed to a new page where news would would populate)
import React from "react";
import './sidebar.css';
//import News from "../news section/News";
import { Link } from 'react-router-dom'
// Imported Images ==============>
import logo from '../../Assets/logo.png';
// Imported icons ===============>
import {IoMdSpeedometer} from 'react-icons/io';
import {TfiWorld} from 'react-icons/tfi';
import {BsQuestionCircle} from 'react-icons/bs'
// placeholder logo image
const Sidebar = () => {
return (
<div className="sideBar grid">
<div className="logoDiv flex">
<img src={logo} alt="World Space Logo" />
<h2>World Space.</h2>
</div>
<div className="menuDiv">
<h3 className="divTitle">
CONSUMPTION OVERVIEW
</h3>
<ul className="menuLists grid">
<li className="listItem">
<a href="/#" className="menuLink flex">
<IoMdSpeedometer className="icon" />
<span className="smallText">
Readout
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Driven Equivalent
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Efficiency Score
</span>
</a>
</li>
</ul>
</div>
{/* This is the tab for the Eco news, please update the necessary fonts and spacing */}
<div className="menuDiv">
<h3 className="divTitle">
NEWS
</h3>
<ul className="menuLists grid">
<li className="listItem">
{/* <a href=/News className="menuLink flex"> */}
<Link to ='\News' className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Eco-News
</span>
</Link>
{/* </a> */}
</li>
</ul>
</div>
<div className="settingsDiv">
<h3 className="divTitle">
SETTINGS
</h3>
<ul className="menuLists grid">
<li className="listItem">
<a href="/#" className="menuLink flex">
<IoMdSpeedometer className="icon" />
<span className="smallText">
Dashboard
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Consumption Overview
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Goals
</span>
</a>
</li>
<li className="listItem">
<a href="/#" className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Achievements
</span>
</a>
</li>
</ul>
</div>
<div className="sideBarCard">
<BsQuestionCircle className="icon" />
<div className="cardContent">
<h3>Help Center</h3>
{/*<p>Having trouble in World Space, please contact us.</p>
<button className="btn">Go to help center</button>*/}
</div>
</div>
</div>
);
}
export default Sidebar;
<div className="menuDiv">
<h3 className="divTitle">
NEWS
</h3>
<ul className="menuLists grid">
<li className="listItem">
{/* <a href=/News className="menuLink flex"> */}
<Link to ='\News' className="menuLink flex">
<TfiWorld className="icon" />
<span className="smallText">
Eco-News
</span>
</Link>
{/* </a> */}
</li>
</ul>
</div>
if you click the link it would lead to a broken page.
What it looks like so far
Ensure that you have followed the below steps as pre requisites
Create browser router
Add a route for your News component
Only then will your routing work
I'm all new to react.
Why does my page not re render on mouse over and mouse out when my state changes? If I look at console.log, I can see the state changes. But I can't get this to work. Here is my code:
export default class Nav extends React.PureComponent {
constructor(props) {
super(props);
this.navLevelOneId = '';
this.state = {
showSubMenu: []
};
}
// Mouse over function
handleHover = (id,event) => {
let showSubMenu=this.state.showSubMenu;
showSubMenu[id]=!showSubMenu[id]
this.setState({showSubMenu: showSubMenu}, () => {
console.log(this.state.showSubMenu);
});
}
render() {
return (
<div ref="megaMenu" className="navbar navbar-default navbar-static-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li onMouseOver={this.handleHover.bind(this,0)} onMouseOut={this.handleHover.bind(this,0)}>
<a>Home</a>
</li>
<li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,1)} onMouseOut={this.handleHover.bind(this,1)}>
<a className="dropdown-toggle" data-toggle="dropdown">Product Listing</a>
<ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[1]}>
<li>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
</li>
</ul>
</li>
<li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,2)} onMouseOut={this.handleHover.bind(this,2)}>
<a className="dropdown-toggle" data-toggle="dropdown">Categories</a>
<ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[2]}>
<li>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
);
}
}
Check out the difference between using Component and PureComponent.
Briefly, PureComponent performs a shallow comparison on state change. That means that it compares only references for state objects and arrays (in your case this.state.showSubMenu is an array and it's reference doesn't change so React won't force a rerender there)
Iam using bxslider in Angularjs app.But when I use ng-repeat it is not working.Below is the angular code.
Thanks in Advance.
<ul class="bxslider" ng-repeat="image in vm.listFullProductDetails[0].ProductImage">
<li>
<img src="/{{image.ProductimageFilepath}}" />
</li>
</ul>
When I remove ng-repeat and add some images , it works fine.How can i resolve the problem.Below is the code.
<ul class="bxslider">
<li>
<!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
<img src="/Images/user4.jpg" />
</li>
<li>
<!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
<img src="/Images/user4.jpg" />
</li>
<li>
<!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
<img src="/Images/user4.jpg" />
</li>
<li>
<!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
<img src="/Images/user4.jpg" />
</li>
<li>
<!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
<img src="/Images/user4.jpg" />
</li>
<li>
<!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
<img src="/Images/user4.jpg" />
</li>
</ul>
The problem is you are repeating the ul tag and thereby repeating class="bxslider". This causes every image to be wrapped within a ul and treat them as separate slider.
<ul class="bxslider">
<li ng-repeat="slide in slides">
<img ng-src="{{slide.src}}" alt="" />
</li>
</ul>
Check this solution by Richard Chu -> http://codepen.io/funkybudda/pen/pnmou
i'm trying to create a carousel that inside of it will be scrollable div with images.
The problem is that the swipe events conflict with eachother.
Plunker (the images are on slide 2)
My code:
<div class="carousel-demo">
<ul rn-carousel rn-carousel-index="carouselIndex" rn-carousel-buffered class="carousel1">
<li ng-swipe-left="left($event)">slide #1</li>
<li ng-swipe-right="right($event)">slide #2
<div class="horizontal-slide">
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
<div class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x100" alt="" />
</a>
</div>
</div>
</li>
<li>slide #3</li>
</ul>
Thank's alot
Avi
I want to show {{Brand.BrandDetails.Text}} only one time outside the ng-repeat.. how can i do this (repeat also want).
<li ng-repeat="Brand in Brands">
<a href="#">
<img src="~/Images/{{Brand.BrandDetails.Image}}" class="topBrandsBrandContentImage">
<p class="darkGray fontsize13 fontWeightLight">{{Brand.BrandDetails.Presentage}}% {{Brand.BrandDetails.Text}}</p>
</a>
</li>
{{ Brands[0].BrandDetails.Text }}
<li ng-repeat="Brand in Brands">
<a href="#">
<img src="~/Images/{{Brand.BrandDetails.Image}}" class="topBrandsBrandContentImage">
<p class="darkGray fontsize13 fontWeightLight">{{Brand.BrandDetails.Presentage}}% {{Brand.BrandDetails.Text}}</p>
</a>
</li>