Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Solved
JQuery and PHP image gallery
Posted on 2014-04-17
I have a JQuery and PHP image gallery. For some reason the gallery is not showing up: Any ideas on why nothing is showing?
http://www.marcushookps.org/doptg/?gallery_id=1
http://www.marcushookps.org/doptg/?gallery_id=1
<?php
if (isset($_GET['gallery_id'])){
$DOPTG_load_scripts = true;
}
include_once 'config.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Thumbnail Gallery (with PHP Admin)</title>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://www.marcushookps.org/doptg/libraries/js/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.marcushookps.org/doptg/libraries/gui/css/jquery.jscrollpane.css" />
<script type="text/JavaScript" src="http://www.marcushookps.org/doptg/libraries/js/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.marcushookps.org/doptg/assets/gui/css/jquery.dop.ThumbnailGallery.css" />
<script type="text/JavaScript" src="http://www.marcushookps.org/doptg/assets/js/jquery.dop.ThumbnailGallery.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$('#DOPThumbnailGalleryContainer1').DOPThumbnailGallery({'URL': 'http://www.marcushookps.org/', 'SettingsFilePath': 'http://www.marcushookps.org/doptg/data/settings1.json', 'ContentFilePath': 'http://www.marcushookps.org/doptg/data/content1.json'});
});
</script>
/////The JSON content file contains this//////
[{"Image":"doptg\/uploads\/TtE8dNkNkRG1HgtjbPkRSTAfxK6KhFmpggmt3wFftEYAmLNsrazg2szFY4KLMgbgS.jpg","Thumb":"doptg\/uploads\/thumbs\/TtE8dNkNkRG1HgtjbPkRSTAfxK6KhFmpggmt3wFftEYAmLNsrazg2szFY4KLMgbgS.jpg","CaptionTitle":"Test One","CaptionText":"","Media":"","LightboxMedia":"","Enabled":"true"},{"Image":"doptg\/uploads\/X9WAEAkqxhmxYGqYLe6Akqgrt9bPYE2nsawnAj78HF4C16pDspcqer59qZPG2215C.jpg","Thumb":"doptg\/uploads\/thumbs\/X9WAEAkqxhmxYGqYLe6Akqgrt9bPYE2nsawnAj78HF4C16pDspcqer59qZPG2215C.jpg","CaptionTitle":"Test Two","CaptionText":"","Media":"","LightboxMedia":"","Enabled":"true"},{"Image":"doptg\/uploads\/Q84CrgrYsG4TLEbrMnDKFPzj6GWmc2Eb9kQmrjmZyBnKbYw4NnmBXT93S3nE4gGhX.jpg","Thumb":"doptg\/uploads\/thumbs\/Q84CrgrYsG4TLEbrMnDKFPzj6GWmc2Eb9kQmrjmZyBnKbYw4NnmBXT93S3nE4gGhX.jpg","CaptionTitle":"","CaptionText":"","Media":"","LightboxMedia":"","Enabled":"true"}]
</head>
<body style="margin:0px; padding:0px;">
<div id="DOPThumbnailGalleryContainer1">Hi</div>
</body>
</html>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
5
4
9 Comments
Active 1 day ago
going to that page, in the developers console, i get a 404 error message when trying to load http://www.marcushookps.org/doptg/data/settings1.json
Active 4 days ago
I showed up top the content of the content file, this is the content of the Settings.json there is a lot of info but the one thing I noticed is in the files there are front and back slashes. Is that ok?
{"Width":"1200","Height":"600","BgColor":"f1f1f1","BgAlpha":"100","ImagesOrder":"normal","ResponsiveEnabled":"true","ThumbnailsPosition":"bottom","ThumbnailsOverImage":"false","ThumbnailsBgColor":"f1f1f1","ThumbnailsBgAlpha":"100","ThumbnailsSpacing":"5","ThumbnailsPaddingTop":"0","ThumbnailsPaddingRight":"5","ThumbnailsPaddingBottom":"5","ThumbnailsPaddingLeft":"5","ThumbnailsNavigation":"mouse","ThumbnailsNavigationPrev":"doptg\/uploads\/settings\/thumbnails-navigation-prev\/0.png","ThumbnailsNavigationPrevHover":"doptg\/uploads\/settings\/thumbnails-navigation-prev-hover\/0.png","ThumbnailsNavigationNext":"doptg\/uploads\/settings\/thumbnails-navigation-next\/0.png","ThumbnailsNavigationNextHover":"doptg\/uploads\/settings\/thumbnails-navigation-next-hover\/0.png","ThumbnailLoader":"doptg\/uploads\/settings\/thumb-loader\/0.gif","ThumbnailWidth":"60","ThumbnailHeight":"60","ThumbnailWidthMobile":"60","ThumbnailHeightMobile":"60","ThumbnailAlpha":null,"ThumbnailAlphaHover":"100","ThumbnailAlphaSelected":"100","ThumbnailBgColor":"f1f1f1","ThumbnailBgColorHover":"000000","ThumbnailBgColorSelected":"000000","ThumbnailBorderSize":"2","ThumbnailBorderColor":"f1f1f1","ThumbnailBorderColorHover":"000000","ThumbnailBorderColorSelected":"000000","ThumbnailPaddingTop":"0","ThumbnailPaddingRight":"0","ThumbnailPaddingBottom":"0","ThumbnailPaddingLeft":"0","ImageLoader":"doptg\/uploads\/settings\/image-loader\/0.gif","ImageBgColor":"afafaf","ImageBgAlpha":"100","ImageDisplayType":"fit","ImageDisplayTime":"1000","ImageMarginTop":"20","ImageMarginRight":"20","ImageMarginBottom":"20","ImageMarginLeft":"20","ImagePaddingTop":"5","ImagePaddingRight":"5","ImagePaddingBottom":"5","ImagePaddingLeft":"5","NavigationEnabled":"true","NavigationOverImage":"true","NavigationPrev":"doptg\/uploads\/settings\/navigation-prev\/0.png","NavigationPrevHover":"doptg\/uploads\/settings\/navigation-prev-hover\/0.png","NavigationNext":"doptg\/uploads\/settings\/navigation-next\/0.png","NavigationNextHover":"doptg\/uploads\/settings\/navigation-next-hover\/0.png","NavigationLightbox":"doptg\/uploads\/settings\/navigation-lightbox\/0.png","NavigationLightboxHover":"doptg\/uploads\/settings\/navigation-lightbox-hover\/0.png","NavigationTouchDeviceSwipeEnabled":"true","CaptionWidth":"900","CaptionHeight":"70","CaptionTitleColor":"000000","CaptionTextColor":"000000","CaptionBgColor":"ffffff","CaptionBgAlpha":"50","CaptionPosition":"bottom","CaptionOverImage":"true","CaptionScrollScrubColor":"777777","CaptionScrollBgColor":"e0e0e0","CaptionMarginTop":"0","CaptionMarginRight":"0","CaptionMarginBottom":"0","CaptionMarginLeft":"0","CaptionPaddingTop":"10","CaptionPaddingRight":"10","CaptionPaddingBottom":"10","CaptionPaddingLeft":"10","LightboxEnabled":"true","LightboxWindowColor":"000000","LightboxWindowAlpha":"80","LightboxLoader":"doptg\/uploads\/settings\/lightbox-loader\/0.gif","LightboxBgColor":"000000","LightboxBgAlpha":"100","LightboxMarginTop":"70","LightboxMarginRight":"70","LightboxMarginBottom":"70","LightboxMarginLeft":"70","LightboxPaddingTop":"10","LightboxPaddingRight":"10","LightboxPaddingBottom":"10","LightboxPaddingLeft":"10","LightboxNavigationPrev":"doptg\/uploads\/settings\/lightbox-navigation-prev\/0.png","LightboxNavigationPrevHover":"doptg\/uploads\/settings\/lightbox-navigation-prev-hover\/0.png","LightboxNavigationNext":"doptg\/uploads\/settings\/lightbox-navigation-next\/0.png","LightboxNavigationNextHover":"doptg\/uploads\/settings\/lightbox-navigation-next-hover\/0.png","LightboxNavigationClose":"doptg\/uploads\/settings\/lightbox-navigation-close\/0.png","LightboxNavigationCloseHover":"doptg\/uploads\/settings\/lightbox-navigation-close-hover\/0.png","LightboxNavigationInfoBgColor":"000000","LightboxNavigationInfoTextColor":"dddddd","LightboxNavigationTouchDeviceSwipeEnabled":"true","SocialShareEnabled":"true","SocialShare":"doptg\/uploads\/settings\/social-share\/0.png","0":false,"TooltipEnabled":"false","TooltipBgColor":"ffffff","TooltipStrokeColor":"000000","TooltipTextColor":"000000","Slideshow":"false","SlideshowTime":"5000","SlideshowAutostart":"true","SlideshowLoop":"true","SlideshowPlay":"doptg\/uploads\/settings\/slideshow-play\/0.png","SlideshowPlayHover":"doptg\/uploads\/settings\/slideshow-play-hover\/0.png","SlideshowPause":"doptg\/uploads\/settings\/slideshow-pause\/0.png","SlideshowPauseHover":"doptg\/uploads\/settings\/slideshow-pause-hover\/0.png","AutoHide":"false","AutoHideTime":"2000"}
Active 1 day ago
in your document load event, you reference http://www.marcushookps.org/doptg/data/settings1.json as your settings file, and that file does not exist, that's why nothing is showing, because it cant find the data to load.
upon a brief look at the content file, it looks like the slashes are escaped properly.
upon a brief look at the content file, it looks like the slashes are escaped properly.
Active 1 day ago
no, the file just doesn't exist at that path. click on the link and you'll see that you get a file not found error. find the file on your server and either move it to that location or change the path in your javascript to match where it is. This needs to be done for both your settings and content files.
Active 4 days ago
Yes, those two files are there in that folder, where they should be. However, when I go to the link, I get the same error, even though yes they are in that folder, on the server.
Active 4 days ago
Is the following line correct?
<script type="text/JavaScript">
$(document).ready(function(){
$('#DOPThumbnailGalleryContainer1').DOPThumbnailGallery({'URL': 'http://www.marcushookps.org/', 'SettingsFilePath': 'http://www.marcushookps.org/doptg/data/settings1.json', 'ContentFilePath': 'http://www.marcushookps.org/doptg/data/content1.json'});
});
</script>
Active 1 day ago
syntax-wise, its correct...the path needs to be valid though...
if you have access to the webserver, can you verify that the /doptg/data/ folder exists? if so, can you send a screenshot of it through windows explorer or something, with the contents of the folder listed?
if you have access to the webserver, can you verify that the /doptg/data/ folder exists? if so, can you send a screenshot of it through windows explorer or something, with the contents of the folder listed?
Active 4 days ago
As I mentioned, it's there but for some reason it is not being recognized.
marcus.jpg
marcus.jpg
Featured Post
An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month6 days, 18 hours left to enroll
705 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.